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 の遷移は正常に機能します。しかし、今はコンポーネントにストアと小道具を提供する方法がわかりませんか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 に答える