抽屉菜单在 react-native 中不起作用答案

【问题标题】：Drawer Menu doesn't work in react-native抽屉菜单在 react-native 中不起作用
【发布时间】：2017-12-02 09:28:06
【问题描述】：

我想在我的 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,
} });

我在app.js 中使用</Application> 之类的应用程序。我的 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 不是一个对象（评估 'this.props.navigation.navigate')

我在组件中尝试了一些代码，例如：this.props.navigation.navigate('Home');，它们正在处理，但我不知道为什么当我在 this.navigate.navigation.navigate 中采用“DrawerOpen”参数时它不起作用强>.

我对此进行了一些搜索。有人告诉我在代码中删除this.prop，但只是更改为导航的错误未定义。由于这个错误，我陷入了困境。它确实是关于DrawerMenu in net 的明显教程湖

【问题讨论】：

标签： javascript android react-native navigation-drawer

【解决方案1】：

你能用这个代码吗：

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

【讨论】：

【解决方案2】：

请阅读以下内容：

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

来自网站的简短引用：

在 JSX 回调中你必须小心 this 的含义。在 JavaScript 中，默认情况下不绑定类方法。如果忘记绑定 this.handleClick 并传递给 onClick，那么在实际调用函数时 this 将是未定义的。

这不是 React 特有的行为；它是 JavaScript 中函数工作方式的一部分。一般如果引用的方法后面不带()，比如onClick={this.handleClick}，就应该绑定那个方法。

【讨论】：

【解决方案3】：

在你的 app.js 中使用应用程序的 easyRNRoute，也许这会起作用

【讨论】：