В 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)
,