代码之家 › 专栏 › 技术社区 › Saeed Heidarizarei

反应导航右对齐的抽屉标签

react-navigation react-native

0

Saeed Heidarizarei · 技术社区 · 7 年前

我正在研究 createdrawernavigator 并且我添加了 drawerposition:'right', but drawerlabel:'home'. still is in left. 如何将drawernavigator的内容右对齐?


   
    
     class myhomescreen extends react.component{
静态导航选项={
drawerLabel:'主页',
}(二)

呈现()。{
返回(
<查看>
<按钮
onPress=()=>this.props.navigation.toggledrawer()
title=“打开抽屉”
/>
</View>
)(二)
}
}

const myapp=创建图纸导航器({
主页:{
屏幕:我的主屏幕,
},请
通知:.{
屏幕:我的通知屏幕,
},请
},请
{
drawerposition:'右',
})(二)
我需要这个输出:

.
如何将drawernavigator的内容右对齐?


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',
});


我需要这个输出:

1 回复 | 直到 7 年前

1

0

Saeed Heidarizarei 7 年前

解决了的。

 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'
  }
);