抽屉宽度错误

Question

我正在我的应用程序上使用抽屉导航器。这是我的代码

在我的应用程序上.js

<Provider store={store}>
            <RootContainer />
            </Provider>

在 RootContainder 上

const AppDrawer = DrawerNavigator(
{
  Home: {
    path: '/',
    screen: WelcomeContainer,
  },
  Category: {
    path: '/list',
    screen: listContainer,
  },
},
{
  contentComponent: SideMenu,
  initialRouteName: 'Home',
  contentOptions: {
    activeTintColor: '#4edb6d',
  },
}
);

我把抽屉嵌入我的堆栈Navigato

const AppNavigator = StackNavigator({
  Home: {
    screen: AppDrawer,
    navigationOptions: ({navigation}) => ({

问题是，在 lanscape 模式或平板电脑上，抽屉使用了大约 80% 的屏幕尺寸，这是非常大的。第二个问题是，当设备方向更改时，不会重新计算宽度：如果我在设备横向时启动应用程序，然后将方向更改为纵向，则抽屉的宽度高于设备宽度。你知道怎么解决这个问题吗？

Answer 1

第一个问题将drawerWidth: (width you want)添加到 DrawerNavigatorConfig。

第二个问题我建议以下解决方案：

• 使用 React-native-orientation 来侦听方向变化
• 编写一个函数（例如计算屏幕宽度）来计算宽度通过使用Dimensions.get('window').width并将其设置为screenWidth状态（或您想要的任何状态）
• 每次调用calculateScreenWidth方向使用反应本机定向提供的_orientationDidChange更改
• 最后，给drawerWidth:this.state.screenWidth.

希望这有帮助。