首页 文章

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

提问于
浏览 次
2

我想在我的 react-native 应用程序中有一个抽屉菜单 . 所以就像你看到我在我的代码中使用react-navigation of 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 在网上的真正湖泊

javascript android react-native navigation-drawer

3 回答

  • 2

    你能用这段代码：

    <Button onPress={() => this.props.navigation.navigate("DrawerOpen")} title="Menu"></Button>
    回复于
  • 1

    请阅读以下内容：

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

    来自网站的简短报价：

    在JSX回调中你必须要小心这个含义 . 在JavaScript中，默认情况下不会绑定类方法 . 如果您忘记绑定this.handleClick并将其传递给onClick，则在实际调用该函数时，这将是未定义的 . 这不是特定于React的行为;它是JavaScript中函数如何工作的一部分 . 通常，如果您在其后引用没有（）的方法，例如onClick = ，则应该绑定该方法 .

    回复于
  • 0

    在app.js中使用easyRNRoute应用程序，可能会有效

    回复于

相关问题