Skip to content

Commit

Permalink
fix(RN): #584 添加 taro-redux-rn 包,重构 taro-router-rn。
Browse files Browse the repository at this point in the history
  • Loading branch information
Pines-Cheng committed Sep 13, 2018
1 parent 0cee9ca commit b8ab4d7
Show file tree
Hide file tree
Showing 6 changed files with 201 additions and 111 deletions.
4 changes: 2 additions & 2 deletions packages/taro-cli/src/rn.js
Expand Up @@ -61,7 +61,7 @@ const PACKAGES = {
'@tarojs/components-rn': '@tarojs/components-rn',
'react': 'react',
'react-native': 'react-native',
'react-redux': 'react-redux'
'react-redux-rn': '@tarojs/taro-redux-rn'
}

function getJSAst (code) {
Expand Down Expand Up @@ -159,7 +159,7 @@ function parseJSCode (code, filePath) {
providorImportName = providerComponentName
specifiers.push(t.importSpecifier(t.identifier(providerComponentName), t.identifier(providerComponentName)))
}
source.value = PACKAGES['react-redux']
source.value = PACKAGES['react-redux-rn']
} else if (value === PACKAGES['@tarojs/components']) {
source.value = PACKAGES['@tarojs/components-rn']
}
Expand Down
2 changes: 1 addition & 1 deletion packages/taro-cli/src/rn/pkg
Expand Up @@ -5,10 +5,10 @@
"@tarojs/components-rn": "^<%= version %>",
"@tarojs/taro-rn": "^<%= version %>",
"@tarojs/taro-router-rn": "^<%= version %>",
"@tarojs/taro-redux-rn": "^<%= version %>",
"expo": "^27.0.1",
"react": "16.3.1",
"react-native": "~0.55.2",
"react-redux": "^5.0.7",
"redux": "^4.0.0"
}
}
29 changes: 29 additions & 0 deletions packages/taro-redux-rn/package.json
@@ -0,0 +1,29 @@
{
"name": "@tarojs/taro-redux-rn",
"version": "1.0.0-beta.26",
"description": "taro-redux-rn",
"main": "./src/index.js",
"files": [
"src",
"index.js"
],
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/NervJS/taro.git"
},
"keywords": [
"router"
],
"author": "O2Team",
"license": "MIT",
"peerDependencies": {
"react": "16.3.0"
},
"dependencies": {
"react-redux": "^5.0.7"
}
}

40 changes: 40 additions & 0 deletions packages/taro-redux-rn/src/index.js
@@ -0,0 +1,40 @@
import { Provider, connect as originConnect, connectAdvanced } from 'react-redux'
import React from 'react'

function connect (mapStateToProps = null, mapDispatchToProps = null, mergeProps = null, options = {}) {

options.withRef = true
let connectAdvanced = originConnect(mapStateToProps, mapDispatchToProps, mergeProps, options)

return (WrappedComponent) => {
let Connect = connectAdvanced(WrappedComponent)

class WrappedConnect extends React.Component {
constructor (props, context) {
super(props, context)
this.connectRef = React.createRef()
}

componentDidMount () {
let wrappedInstance = this.connectRef.current.getWrappedInstance()
wrappedInstance.componentDidShow && wrappedInstance.componentDidShow()
}

componentWillUnmount () {
let wrappedInstance = this.connectRef.current.getWrappedInstance()
wrappedInstance.componentDidHide && wrappedInstance.componentDidHide()
}

render () {
return (
<Connect ref={this.connectRef} {...this.props}/>
)
}
}

return WrappedConnect
}
}

export { Provider, connect, connectAdvanced }
export default {Provider, connect, connectAdvanced}
118 changes: 118 additions & 0 deletions packages/taro-router-rn/src/TaroProvider.js
@@ -0,0 +1,118 @@
import React from 'react'
import queryString from 'query-string'
import RefreshProvider from './RefreshProvider'

class TaroProvider extends React.Component {
constructor (props, context) {
super(props, context)
this.refreshProviderRef = React.createRef()
let {Taro} = this.props
// 这样处理不一定合理,
// 有时间看一下 react-navigation 内部的实现机制再优化
Taro.navigateTo = this.wxNavigateTo.bind(this)
Taro.redirectTo = this.wxRedirectTo.bind(this)
Taro.navigateBack = this.wxNavigateBack.bind(this)
Taro.switchTab = this.wxSwitchTab.bind(this)
Taro.getCurrentPages = this.wxGetCurrentPages.bind(this)
}

componentDidMount () {
let {Taro} = this.props
try {
Taro.startPullDownRefresh = this.refreshProviderRef.current && this.refreshProviderRef.current.handlePullDownRefresh
Taro.stopPullDownRefresh = this.refreshProviderRef.current && this.refreshProviderRef.current.stopPullDownRefresh
} catch (e) {
console.log('this.refreshProviderRef: ')
console.log(this.refreshProviderRef)
throw e
}
}

wxNavigateTo ({url, success, fail, complete}) {
if (url.startsWith('/')) {
url = url.substr(1)
}

let obj = queryString.parseUrl(url)
console.log(obj)
try {
this.props.navigation.push(obj.url, obj.query)
} catch (e) {
fail && fail(e)
complete && complete(e)
throw e
}
success && success()
complete && complete()
}

wxRedirectTo ({url, success, fail, complete}) {
if (url.startsWith('/')) {
url = url.substr(1)
}

let obj = queryString.parseUrl(url)
console.log(obj)
try {
this.props.navigation.replace(obj.url, obj.query)
} catch (e) {
fail && fail(e)
complete && complete(e)
throw e
}
success && success()
complete && complete()
}

wxSwitchTab ({url, success, fail, complete}) {
if (url.startsWith('/')) {
url = url.substr(1)
}

let obj = queryString.parseUrl(url)
console.log(obj)
try {
this.props.navigation.navigate(obj.url, obj.query)
} catch (e) {
fail && fail(e)
complete && complete(e)
throw e
}
success && success()
complete && complete()
}

wxNavigateBack ({delta = 1}) {
while (delta > 0) {
this.props.navigation.goBack()
delta--
}
}

wxGetCurrentPages () {
let parentState = this.props.navigation.dangerouslyGetParent().state
if (parentState && parentState.routes) {
return parentState.routes.map(item => item.routeName)
} else {
return []
}
}

render () {
let {enablePullDownRefresh, navigationOptions} = this.props
let isScreenEnablePullDownRefresh = enablePullDownRefresh || (navigationOptions && navigationOptions.enablePullDownRefresh)
return (
<RefreshProvider
enablePullDownRefresh={isScreenEnablePullDownRefresh}
onPullDownRefresh={this.onPullDownRefresh && this.onPullDownRefresh.bind(this)}
onReachBottom={this.onReachBottom && this.onReachBottom.bind(this)}
onScroll={this.onScroll && this.onScroll.bind(this)}
ref={this.refreshProviderRef}
>
{this.props.children}
</RefreshProvider>
)
}
}

export default TaroProvider
119 changes: 11 additions & 108 deletions packages/taro-router-rn/src/getWrappedScreen.js
@@ -1,6 +1,5 @@
import React from 'react'
import queryString from 'query-string'
import RefreshProvider from './RefreshProvider'
import TaroProvider from './TaroProvider'

/**
* @description 包裹页面 Screen 组件,处理生命周期,注入方法
Expand All @@ -9,125 +8,29 @@ import RefreshProvider from './RefreshProvider'
* @returns {WrappedScreen}
*/
function getWrappedScreen (Screen, Taro, {enablePullDownRefresh}) {
class WrappedScreen extends Screen {
class WrappedScreen extends React.Component {
constructor (props, context) {
super(props, context)
this.refreshProviderRef = React.createRef()
// 这样处理不一定合理,
// 有时间看一下 react-navigation 内部的实现机制再优化
Taro.navigateTo = this.wxNavigateTo.bind(this)
Taro.redirectTo = this.wxRedirectTo.bind(this)
Taro.navigateBack = this.wxNavigateBack.bind(this)
Taro.switchTab = this.wxSwitchTab.bind(this)
Taro.getCurrentPages = this.wxGetCurrentPages.bind(this)
this.screenRef = React.createRef()
}

componentDidMount () {
try {
Taro.startPullDownRefresh = this.refreshProviderRef.current && this.refreshProviderRef.current.handlePullDownRefresh
Taro.stopPullDownRefresh = this.refreshProviderRef.current && this.refreshProviderRef.current.stopPullDownRefresh
} catch (e) {
console.log('this.refreshProviderRef: ')
console.log(this.refreshProviderRef)
throw e
}
super.componentDidMount && super.componentDidMount()
super.componentDidShow && super.componentDidShow()
this.screenRef.componentDidShow && this.screenRef.componentDidShow()
}

componentWillUnmount () {
super.componentDidHide && super.componentDidHide()
super.componentWillUnmount && super.componentWillUnmount()
}

wxNavigateTo ({url, success, fail, complete}) {
if (url.startsWith('/')) {
url = url.substr(1)
}

let obj = queryString.parseUrl(url)
console.log(obj)
try {
this.props.navigation.push(obj.url, obj.query)
} catch (e) {
fail && fail(e)
complete && complete(e)
throw e
}
success && success()
complete && complete()
}

wxRedirectTo ({url, success, fail, complete}) {
if (url.startsWith('/')) {
url = url.substr(1)
}

let obj = queryString.parseUrl(url)
console.log(obj)
try {
this.props.navigation.replace(obj.url, obj.query)
} catch (e) {
fail && fail(e)
complete && complete(e)
throw e
}
success && success()
complete && complete()
}

wxSwitchTab ({url, success, fail, complete}) {
if (url.startsWith('/')) {
url = url.substr(1)
}

let obj = queryString.parseUrl(url)
console.log(obj)
try {
this.props.navigation.navigate(obj.url, obj.query)
} catch (e) {
fail && fail(e)
complete && complete(e)
throw e
}
success && success()
complete && complete()
}

wxNavigateBack ({delta = 1}) {
while (delta > 0) {
this.props.navigation.goBack()
delta--
}
}

wxGetCurrentPages () {
let parentState = this.props.navigation.dangerouslyGetParent().state
if (parentState && parentState.routes) {
return parentState.routes.map(item => item.routeName)
} else {
return []
}
this.screenRef.componentDidHide && this.screenRef.componentDidHide()
}

render () {
// if (enablePullDownRefresh || (Screen.navigationOptions && Screen.navigationOptions.enablePullDownRefresh)) {
let isScreenEnablePullDownRefresh = enablePullDownRefresh || (Screen.navigationOptions && Screen.navigationOptions.enablePullDownRefresh)
return (
<RefreshProvider
enablePullDownRefresh={isScreenEnablePullDownRefresh}
onPullDownRefresh={this.onPullDownRefresh && this.onPullDownRefresh.bind(this)}
onReachBottom={this.onReachBottom && this.onReachBottom.bind(this)}
onScroll={this.onScroll && this.onScroll.bind(this)}
ref={this.refreshProviderRef}
>
{super.render()}
</RefreshProvider>
<TaroProvider
navigationOptions={Screen.navigationOptions || {}}
Taro={Taro}
enablePullDownRefresh={enablePullDownRefresh}>
<Screen ref={this.screenRef} {...this.props}/>
</TaroProvider>
)
// } else {
// console.log('not enablePullDownRefresh')
// return super.render()
// }
}
}

Expand Down

0 comments on commit b8ab4d7

Please sign in to comment.