我有 Prop 在初始屏幕上从服务器加载的内容。我想将它们传递给其余选项卡屏幕。但是,我没有在线找到任何示例。我知道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}
/>
如何设置此功能的任何好的示例都将有所帮助。提前致谢。
主屏幕设置:
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); */