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

Question

所以最初我的应用程序在 index.ios.js 中将商店提供给组件，就像这样：

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 -> AudioPlayerPage（我显示的原始屏幕）。

屏幕 1 -> 2 -> 3 的转换效果很好。但是现在我不知道如何为我的组件提供 store 和 props 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>
      );
    } 
}

Answer 1

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

连接组件

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

In React Native how to pass store to Component when using NavigatorIOS?

react-native

store

navigator-ios