我想在我的react-native应用程序中有一个抽屉菜单。就像你看到的那样，我在代码中使用react-native的堆栈导航来确定路线和DrawerNavigator它连接到堆栈屏幕字段中的应用程序!:
const Application = StackNavigator({
Home: {
screen: Login,
}
,
Profile: {
screen: Profile,
}
});
const easyRNRoute = DrawerNavigator({
Stack: {
screen: Application
}
}, {
contentComponent: DrawerMenu,//<XXXDraw
contentOptions: {
activeTintColor: '#e91e63',
style: {
flex: 1,
paddingTop: 15,
} });
我使用类似 </Application> 的应用程序在app.js 。我的 DrawerMenu 指向“//
export default class DrawerMenu extends Component {
render() {
return (
<View>
<Text>Menu</Text>
</View>
);
}
}
我的页面 - 我想在其中显示菜单并遇到问题 - 包含以下代码:
export default class Profile extends React.Component {
static navigationOptions = { header: null };
constructor(props) {
super(props);
this.state = {
active: 'Today',
};
}
navigate() {
this.navigate.navigation.navigate('DrawerOpen'); // open drawer
}
render() {
return (
<View style={styles.countainer}>
<Text style={styles.header}>Profile</Text>
<Button onPress={this.navigate} title="Menu"></Button>
</View>
);
}
}
问题是这样的:当我单击菜单按钮时。我收到此错误:
undefined is not an object (evaluating 'this.props.navigation.navigate')
我尝试了一些代码，例如:this.props.navigation.navigate('Home');在组件中，它们正在工作，但我不知道为什么当我在 this.navigate.navigation.navigate 中采用“DrawerOpen”参数时它不起作用。
我对此进行了一些搜索。有人告诉我删除 this.prop在代码中，但只是更改为导航的错误未定义。由于这个错误，我陷入了麻烦。它确实是一个关于DrawerMenu的明显教程湖。在网络中
最佳答案
你可以使用这个代码吗:
<Button onPress={() => this.props.navigation.navigate("DrawerOpen")} title="Menu"></Button>
关于javascript - 抽屉菜单在 react native 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47606407/