javascript - 如何使用抽屉以正确的方式 react native ？

Question

它在 App.js 页面上生成

const MyApp = createDrawerNavigator({
    Requester: {
        screen: Requester,
    },
    Forgot: {
        screen: Forgot,
    },
});

我想显示一个带有菜单按钮的欢迎页面。当用户单击菜单按钮时，应该会出现一个抽屉菜单。

<View style={{marginTop:30, justifyContent: 'center', backgroundColor: 
    '#095473', paddingLeft: '80%', flexDirection: 'row' }}>

    <TouchableOpacity onPress={() => 
        {this.props.navigation.navigate('DrawerOpen'); } }>
        <Icon
            name="menu"
            size={60}
            color="white"
            //onPress={() => this.props.navigation.navigate("Register")}
         />
    </TouchableOpacity>
</View>

为什么抽屉打不开？请指导

Answer 1

我假设您使用的是最近的 react-navigation，因为您使用了 createDrawerNavigator 函数。基于最新的文档，他们用更新的 API 替换了以前的 API。 See here

要打开抽屉，您需要使用 this.props.navigation.openDrawer() 而不是 this.props.navigation.navigate('DrawerOpen')。

所以粗略的实现是这样的:

<TouchableOpacity onPress={this.props.navigation.openDrawer} />

如何实现它的完整引用:

https://reactnavigation.org/docs/en/drawer-based-navigation.html