javascript – TabNavigator中的React Navigation传递道具
作者:互联网
我有在初始屏幕上从服务器加载的道具.我想将它们传递给其他选项卡屏幕.但是,我没有在网上找到任何例子.我知道screenProps,但不知道如何设置它.我尝试过的所有方法都导致了错误.
const EProj = TabNavigator({
Home: { screen: HomeScreen },
Map: { screen: MapG },
Login: { screen: Login },
Profile: { screen: Profile },
}, {
tabBarPosition: 'bottom',
animationEnabled: true,
tabBarOptions: {
activeTintColor: '#1abc9c',
},
});
这是我的屏幕设置.我应该在哪里放置screenProps?
<EProj
screenProps={cats}
/>
如何设置它的任何好例子都会有所帮助.提前致谢.
HomeScreen设置:
class HomeScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Home',
};
...
componentWillMount(){
console.log("Starting to load assets from server!");
this.onLoadCats(); /*starts asset loading*/
}
render() {
return (
<View style={styles.container}>
<Text>Welcome to alpha 1.17 This is hard system test.</Text>
<AssetsLoad catsL={this.state.catsL} />
</View>
);
}
}
解决方法:
你可以做的是创建一个可以返回导航的高阶组件,在该组件的componentDidMount中,你可以加载数据并通过screenProps传递它.
例
const EProj = TabNavigator({
Home: { screen: HomeScreen },
Map: { screen: MapG },
Login: { screen: Login },
Profile: { screen: Profile },
}, {
tabBarPosition: 'bottom',
animationEnabled: true,
tabBarOptions: {
activeTintColor: '#1abc9c',
},
});
class MainNavigation extends React.Component {
constructor(props) {
super(props);
this.state = {cats: []};
}
componentDidMount() {
this.onLoadCats().then((cats) => this.setState({ cats: cats }));
}
render() {
return(<EProj screenProps={{ cats: this.state.cats}} />
}
}
// Now you can do in your screens
console.log(this.props.screenProps.cats);
/* This is next line is wrong, please check update above */
/* console.log(this.props.navigation.state.params.cats); */
标签:react-navigation,android,javascript,react-native 来源: https://codeday.me/bug/20190930/1836322.html