3

所以最初我的应用程序将商店提供给组件，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 的转换工作正常。但是现在我不知道如何为我的 Component 提供商店和道具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>
      );
    } 
}
4

1 回答 1

2

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

于 2016-09-30T19:15:44.623 回答