在React Native中使用NavigatorIOS时如何将store传递给组件？

Question

原先我的应用在 index.ios.js 中可以正常向组件提供 store，代码如下：

class Laybium extends Component {
  render() {
    return (
      <Provider store={store}>
        <AudioPlayerPage />
      </Provider>
    );
  }
}

然而，我想添加一些更多的屏幕，所以我使用了NavigatorIOS，如下所示：

class Laybium extends Component {
  render() {
    return (
      <Provider store={store}>
        <NavigatorIOS
          initialRoute={{ 
            component: Screen1,
            title: 'Screen 1: Pick username'
          }}
          style={{flex: 1}}
        />
      </Provider>
    );
  }
}

这使得我的应用能够前往 -> 屏幕1 -> 屏幕2 -> 屏幕3 -> 音频播放页面(原始页面我展示)。

从屏幕1 -> 2 -> 3的转换正常工作。但现在我不知道如何为我的组件“AudioPlayerPage”提供存储和道具。 因为将“NavigatorIOS”组件包装在“Provider”组件中似乎没有起作用。

这是我的Screen3.js，它转换到我的组件“AudioPlayerPage”

class Screen3 extends Component {
    static propTypes = {
      navigator: PropTypes.object.isRequired
    }

    constructor(props, context) {
      super(props, context);
      this._onForward = this._onForward.bind(this);
    } 

    _onForward() {
      this.props.navigator.push({
        component: AudioPlayerPage,
        title: 'AudioPlayer: play synced song'
        // TODO: pass store
      });
    }

    render() {
        return (
          <View style={styles.container}>
            <Text style={styles.text}>Screen3</Text>

            <TouchableHighlight style={styles.button}
                onPress={this._onForward}
                underlayColor='#99d9f4'>
              <Text style={styles.buttonText}>Go to AudioPlayerPage</Text>
            </TouchableHighlight>
          </View>
      );
    } 
}

- letter Q

Answer 1

我自己没有使用过NavigatorIOS，但使用react-native-router-flux时，我会像这样从我的组件中调用dispatch：this.props.dispatch(someAction())。至于存储的状态，我通过mapStateToProps回调来访问它。要接收回调，组件应首先使用connect(mapStateToProps)(ComponentName)进行连接。

- Georgios

---

你的 package.json 文件中有哪个版本的 React 和 React Native？我无法使用 "react": "15.0.2", "react-native": "0.26.3", "react-native-router-flux": "^3.35.0" 进行构建，包括和不包括 ^ 符号。 - letter Q

我正在使用React 15.3.1，React-Native 0.33.0和React-Native-Router-Flux ^3.35.0。目前我只在Android上尝试过，还没有在iOS上测试过。 - Georgios

这个有什么进展吗？ - Georgios

我升级React版本到0.26以上遇到了很多麻烦，现在甚至无法使用该库:( - letter Q

好的，如果您成功升级但仍然无法正常工作，请告诉我。 - Georgios