В React Native, как передать хранилище в Компонент при использовании NavigatorIOS?

Поэтому изначально мое приложение отдавало магазин компоненту в порядке 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>
      );
    } 
}

1 ответ

Решение

Я не использовал NavigatorIOS сам, но с помощью response-native-router-flux я вызываю dispatch из моих компонентов, как это: this.props.dispatch(someAction()), Что касается состояния магазина, я получаю к нему доступ через mapStateToProps Обратные вызовы. Чтобы получить обратный вызов, компонент должен быть сначала подключен с помощью connect(mapStateToProps)(ComponentName),

Другие вопросы по тегам