抽屉菜单在反应原生中不起作用

Question

我想在我的反应原生应用程序中有一个抽屉菜单。 所以就像你看到的，我在我的代码中使用 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,
} });

我在app.js中使用像</Application>这样的应用程序。 我的抽屉菜单由"//

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>
);
}
}

问题是这样的：当我单击菜单按钮时。 我收到此错误：

未定义不是对象(评估 'this.props.navigation.navigate')

我尝试了一些代码，例如：组件中的this.props.navigation.navigate('Home');，他们正在处理，但我不知道为什么当我在这个.navigate.navigation.navigate中使用"DrawerOpen"参数时它不起作用。

我对此进行了一些搜索。 有人告诉我在代码中删除this.prop，但只是错误更改为导航是未定义的。 由于此错误，我遇到了麻烦。 它真的是关于网络中DrawerMenu的明显教程湖

Answer 1

你能使用这段代码吗：

<Button onPress={() => this.props.navigation.navigate("DrawerOpen")} title="Menu"></Button>

Answer 2

请阅读以下内容：

https://reactjs.org/docs/handling-events.html

来自网站的简短引用：

您必须注意 JSX 回调中的含义。在 JavaScript 中，类方法默认不受约束。如果您忘记绑定 this.handleClick 并将其传递给 onClick，则在实际调用函数时将未定义此功能。

这不是特定于 React 的行为;它是函数在 JavaScript 中工作方式的一部分。通常，如果引用后不带 () 的方法，例如 onClick={this.handleClick}，则应绑定该方法。

Answer 3

在您的应用程序中使用easyRNRoute而不是应用程序.js，也许这会起作用