我对一般编程相当陌生,甚至对 JS 和 React(Native) 还比较陌生,但我已经为此工作了一整天,但我仍然没有弄清楚,所以我求助于 Stack Overflow,希望有人能帮助我可以帮我。
基本上我想要完成的是设置其他Components
作为孩子的App
组件,因为我希望他们能够访问我将在state
of App
。然而,与此同时,我也在使用react-navigation
创建底部导航栏,因此我不知道如何通过props
of App
对这些其他的Components
如那个ExplorePage
代表另一个组件children components
.
App
import React from 'react';
import ExplorePage from './app/tabs/ExplorePage';
import {createBottomTabNavigator} from 'react-navigation';
...other imports
class App extends React.Component {
state = {
parentState: 'testing testing',
}
}
const MainScreenNavigator = createBottomTabNavigator(
{
Home: {screen: ExplorePage},
Search: {screen: SearchPage},
Favorites: {screen: FavoritesPage},
}
);
export default MainScreenNavigator;
ExplorePage,就像搜索页面和收藏夹页面
...imports
export default class ExplorePage extends React.Component {
constructor(props) {
super(props);
this.state = {
}
}
componentDidMount() {
console.log(this.props.parentState ? this.props.parentState : "Parent state does not exist what do :(");
}
render(){
return(
<Text>Testing</Text>
)
}
显然每次控制台打印出parentState
不存在。我以为在同一个地方会给对方带来components
like ExplorePage
的道具App
。谢谢你帮助我!
对于那些正在寻找 React Navigation 5 解决方案的人,您可以使用initialParams
像这样:
<Stack.Navigator>
<Stack.Screen
name="screenName"
component={screenComponent}
initialParams={{key: value}}
/>
</Stack.Navigator>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)