CreateNavigationDrawer 右侧 React Native答案

【问题标题】：CreateNavigationDrawer Right Side React NativeCreateNavigationDrawer 右侧 React Native
【发布时间】：2018-09-27 13:48:04
【问题描述】：

如何在 React Native 中从右侧滑动导航抽屉，我尝试了 position: right 但它不起作用

 export default createDrawerNavigator({

 Home:{
 screen: AppStackNav,
 navigationOptions: {
  drawerIcon: ({tintColor}) => (
    <Icon name = 'ios-home' style={{fontSize:24, color: tintColor}}/>
  ),
  drawerLabel: "Home",

}},

Setting: {
screen: SettingScreen,
navigationOptions: {
    drawerLabel: "Setting",
    drawerIcon: ({tintColor}) => (
      <Icon name = 'ios-settings' style={{fontSize:24, color: tintColor}}/>
    )}},
{
    contentComponent: CustomDrawerComponent

  },{
   drawerPosition: 'right',}

);

【问题讨论】：

为了给您一个很好的答案，如果您还没有看过How to Ask，它可能会对我们有所帮助。如果您可以提供minimal reproducible example，它可能也很有用。

标签： react-native navigation-drawer react-navigation

【解决方案1】：

缺少组件右括号，drawerPosition 应该是组件右括号后的第一个参数。现在工作正常。

const Hello = createDrawerNavigator({
     Home:{
     screen: AppStackNav,
     navigationOptions: {
      drawerIcon: ({tintColor}) => (
        <Icon name = 'ios-home' style={{fontSize:24, color: tintColor}}/>
      ),
      drawerLabel: "Home",

    }},

    Setting: {
    screen: SettingScreen,
    navigationOptions: {
        drawerLabel: "Setting",
        drawerIcon: ({tintColor}) => (
          <Icon name = 'ios-settings' style={{fontSize:24, color: tintColor}}/>
        )}}
      },{
       drawerPosition: 'right',},
    {
        contentComponent: CustomDrawerComponent

      }

    );

【讨论】：

【解决方案2】：

反应导航 v5

import {createDrawerNavigator} from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();

然后在 Drawer.Navigator 上

drawerPosition="正确"

喜欢这个

   <Drawer.Navigator
      drawerPosition="right"
      initialRouteName="Home">
      <Drawer.Screen name="Home" component={HomeScreen} />
   </Drawer.Navigator>

【讨论】：