首页 > 解决方案 > react-navigation A right-aligned drawerLabel

问题描述

I'm working on createDrawerNavigator and I added drawerPosition: 'right', But drawerLabel: 'Home'Still is in left.
How Should I put content of DrawerNavigator in right align?

class MyHomeScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: 'Home',
  };

  render() {
    return (
      <View>
        <Button
          onPress={() => this.props.navigation.toggleDrawer()}
          title="Open Drawer"
        />
      </View>
    );
  }
}

const MyApp = createDrawerNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
},
{
  drawerPosition: 'right',
});

I need This Output:
Photo

标签: react-nativereact-navigation

解决方案


Solved✅.

 const DrawerStack = createDrawerNavigator(
  {
    Home: {
      screen: Screen1Stack
    },
    About: {
      screen: Screen2Stack,
    },
  },
  {
    initialRouteName: 'Home',
    contentOptions: {
      activeTintColor: '#e91e63',
      itemsContainerStyle: {
        // opacity: 1
      },
      iconContainerStyle: {
        // opacity: 1
      },
      itemStyle: {
        flexDirection: 'row-reverse'
      }
    },
    drawerWidth: 300,
    drawerPosition: 'right'
  }
);

推荐阅读