使用 Redux 的 React-native 导航答案

【问题标题】：React-native navigation with Redux使用 Redux 的 React-native 导航
【发布时间】：2016-08-14 22:49:09
【问题描述】：

我是 React-native 和 Redux 的新手。我打算使用 Navigator 组件进行导航。例如，有一个按钮。当它被按下时，应用程序将导航到另一个视图。我想知道是否应该直接在 onPress 中调用 push 还是应该先调用 dispatch 然后再调用基于 push国家？

附言

例如，我有 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>
    )
  }
}

当点击login按钮时，我想通过LaunchScreen启动LoginScreen。如您所见，当用户单击登录按钮时，将调度一个动作，然后 reducer 调用 selectScreen 函数。

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

【问题讨论】：

标签： react-native redux

【解决方案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' })
}

【讨论】：