Question

我是React-native和Redux的新手。我计划使用 Navigator 组件进行导航。例如，有一个按钮。按下该按钮后，该应用将导航到另一个视图。我想知道是否应该直接在 onPress 中调用推送，或者我应该首先调用调度然后调用推送基于州？

P.S。

例如，我有3个组件。一个是容器（ LaunchContainer ）：

export default class LaunchContainer extends Component {
  renderScene(route,navigator) {
    return <route.component {...route.passProps}
      title={route.name} navigator={navigator} />
  }

  render() {
    const initialScreen = FrontScreen
    return (
      <Navigator style={{flex:1}}
        initialRoute={{name:'Launch',component:initialScreen}}
        renderScene={this.renderScene} />)
  }
}
const screenSelector = (store) => {  
  return {
    inLoginScreen: store.launch.isInLoginScreen
  }
}

module.exports = connect(screenSelector)(LaunchContainer)

容器内的初始屏幕是 FrontScreen ：

export default class FrontScreen extends Component {

  render() {
    return (
      <View style={styles.container}>
          <TouchableHighlight onPress={()=> this.props.dispatch(switchToLogin())}>
            <Text style={styles.btnText}>LOG IN</Text>
          </TouchableHighlight>
      </View>
    )
  }
}

点击登录按钮后，我想通过启动屏幕启动登录屏幕。如您所见，当用户单击登录按钮时，将调度一个操作，然后由reducer调用 selectScreen 功能。

我的问题是我应该如何以及何时推送登录组件？

Answer 1

您在组件中调度操作。例如，您可以使用sagas来监听商店中的特定操作，然后执行基于promise（异步）的操作。

function* saga_example() {
   yield take('CHANGE_TO_HOME_SCENE')
   yield put({ type: 'SHOW_WAITING_MODAL' })
   const response = yield call(expensiveFunction)
   yield put({ type: 'EXPENSIVE_RESULT', response.data})
   yield put({ type: 'HIDE_WAITING_MODAL' })
}

使用Redux进行React-native导航

1 个答案: