通过 NavigatorIOS 传递 Redux 状态

Question

我正在将 Redux 集成到 React Native 应用程序中。我无法弄清楚如何通过 NavigatorIOS 组件传递 Redux 状态。

执行进入下图组件时，调试器显示

props = Object {state: undefined, actions: Object} 随着动作对象中的预期动作，状态尚未定义，因为它尚未初始化（我假设）。

但是当执行进入ItemIndex组件时，调试器显示 props = Object {navigator: Object, route: Object}

我当前的实现试图显式传递状态和操作，但它们没有通过：调试器现在显示 props = Object {navigator: Object, route: Object, state: null, actions: undefined}

class MainComponent extends Component {
  constructor(props) {
    super(props) 
    const { actions, state } = props
  }

  render() {
    return (
      <NavigatorIOS
        ref = "nav"
        style = {styles.navigator}
        initialRoute = {{
          // Pass redux state into component
          passProps: { state: this.state, actions: this.actions },  
          // currently becomes { state: null, actions: undefined }
          title: 'Items',
          component: ItemIndex
        }}/> 
    )
  }
}

module.exports = MainComponent

有什么方法可以让我继续通过 NavigatorIOS 向下传递 Redux 状态？

Answer 1

我意识到我遗漏了链的 props 部分：

  render() {
    return (
      <NavigatorIOS
        ref = "nav"
        style = {styles.navigator}
        initialRoute = {{
          // Pass redux state into component
          passProps: { state: this.props.state, actions: this.props.actions },  
          title: 'Items',
          component: ItemIndex
        }}/> 
    )
  }

实际上 - 这只适用于初始状态，它似乎停止状态变化触发 initialRoute 组件和后续组件的组件更新。

Answer 2

react-native-navigation supports Redux, uses native iOS view controllers (via react-native-controllers 而不是 navigatorIOS）并且很快就会支持 Android。到目前为止，这是满足我需求的最佳导航解决方案。

通过 NavigatorIOS 传递 Redux 状态

Pass Redux state via NavigatorIOS

navigation

ios

react-native

redux