[英]How to access element props react navigation
I declared a top bar element like this. 我这样声明了一个顶部栏元素。
export default Class MyClass extends React.Component {
static router = TopTabNavigator.router;
render() {
return() {
<View>
<TopTabNabiagtor
navigation = {this.props.navigation}
data = {this.state.data}
/>
</View>
}
}
}
and still don't know how to access the data props from the creation of TopBar. 仍然不知道如何从TopBar的创建中访问数据道具 。
const TopTabNavigator = createMaterialTopTabNavigator(
{
Tab1: {
screen: props => <Tab1 {...props} information = {props.data.information} />,
navigationOptions: {
tabBarLabel: "Tab1"
}
},
},
Data props is undefined, I might wrong when accessing the props, did anyone know how to solve it... 数据道具未定义,访问道具时我可能会错,有人知道如何解决它吗?
You need to pass them in a specific way and that is by using screenProps
, if you don't they may not get there. 您需要以特定的方式传递它们,即使用
screenProps
传递它们, screenProps
,它们可能无法到达那里。
The documentation explains it how to pass screenProps
https://reactnavigation.org/docs/en/stack-navigator.html#navigator-props 该文档说明了如何通过
screenProps
https://reactnavigation.org/docs/en/stack-navigator.html#navigator-props
In MyClass
pass the props that you wish to pass in the following way 在
MyClass
通过以下方式传递您希望传递的道具
<TopTabNabiagtor
navigation = {this.props.navigation}
screenProps = {{data: this.state.data}}
/>
You don't need to do anything special when you create your TopTabNavigator
you should just be able to access them directly in the Tabs
by doing the following 创建
TopTabNavigator
时,无需执行任何特殊操作,只需执行以下操作即可直接在Tabs
访问它们
this.props.screenProps.data.information
Here is some example code, which I have also made into a handy snack for you. 这是一些示例代码,我也为您制作了一些方便的零食。 https://snack.expo.io/@andypandy/passing-props-through-a-navigator
https://snack.expo.io/@andypandy/passing-props-through-a-navigator
import AppContainer from './MainNavigation';
export default class App extends React.Component {
state = {
data: { key: 2345, name: 'John'}
};
render() {
return (
<View style={{flex: 1}}>
<AppContainer screenProps={{data: this.state.data}}/>
</View>
)
}
}
import { createMaterialTopTabNavigator, createAppContainer } from 'react-navigation';
const screens = {
Screen1: {
screen: props => <Screen1 {...props} /> // you can set up the screen this way
},
Screen2: {
screen: Screen2 // or you can set it up this way, I usually set it up this way
}
}
const config = {
headerMode: 'none',
initialRouteName: 'Screen1'
}
const MainNavigator = createMaterialTopTabNavigator(screens,config);
export default createAppContainer(MainNavigator);
export default class Screen1 extends Component {
render() {
return (
<View style={styles.container}>
<Text>Screen 1</Text>
<Text>{this.props.screenProps.data.name}</Text>
</View>
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.