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>
    );
  }
}

允许我的应用转到 - ＆gt;屏幕1 - ＆gt;屏幕2 - ＆gt;屏幕3 - ＆gt; AudioPlayerPage（原始屏幕我显示）。

屏幕1的转换 - ＆gt; 2 - ＆gt; 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>
      );
    } 
}

Answer 1

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

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

1 个答案: