如何设置 react-native-navigation 抽屉的主父宽度答案

【问题标题】：How to set up main parent width of react-native-navigation drawer如何设置 react-native-navigation 抽屉的主父宽度
【发布时间】：2018-12-27 06:08:32
【问题描述】：

如何设置 react-native 导航抽屉的宽度，我可以改变抽屉内容的宽度，但是我不能改变主父的宽度，我总是看起来是白色的背景。

{
initialRouteName: 'Home',
drawerPosition: 'left',
contentComponent: withUserContext(CustomDrawerContentComponent),
drawerOpenRoute: 'DrawerOpen',
drawerToggleRoute: 'DrawerToggle',
drawerCloseRoute: 'DrawerClose',
style:{
  drawer: {width:200, shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3},
    main: {paddingLeft: 3}
},
contentOptions: {
  activeTintColor: "white",
  activeBackgroundColor: 'transparent',
  inactiveTintColor: '#c5e6fc',
  inactiveBackgroundColor: 'transparent',
  labelStyle: {
    fontSize: 15,
    marginLeft: 10,
    },
  },
}

任何帮助将不胜感激。

提前致谢。

【问题讨论】：

标签： react-native react-navigation drawer

【解决方案1】：

而不仅仅是给它200的宽度

import {Dimensions} from 'react-native';

然后得到设备的宽度

const width = Dimensions.get("screen").width;

然后，width: width - width/4

【讨论】：

【解决方案2】：

添加一行代码，你可以改变抽屉的宽度

drawerWidth: Dimensions.get('window').width,

不要忘记像这样导入维度

import {Dimensions} from 'react-native';

在你的代码中添加这一行如下

{
initialRouteName: 'Home',
drawerPosition: 'left',
contentComponent: withUserContext(CustomDrawerContentComponent),
drawerOpenRoute: 'DrawerOpen',
drawerToggleRoute: 'DrawerToggle',
drawerCloseRoute: 'DrawerClose',
drawerWidth: Dimensions.get('window').width,
style:{
  drawer: {width:200, shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3},
    main: {paddingLeft: 3}
},

你可以像这样相应地改变宽度

drawerWidth: Dimensions.get('window').width/2,

或以任何方式。

【讨论】：