抽屉宽度错误

Question

我在我的应用上使用DrawerNavigator。这是我的代码

在我的app.js

上

import Work from './modules/work.js';


Work.hej();

RootContainder上的

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

我将抽屉嵌入我的stackNavigato

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

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

Answer 1

首先问题将drawerWidth: (width you want)添加到DrawerNavigatorConfig。

第二次问题我建议采用以下解决方案：

• 使用react-native-orientation来倾听方向变化
• 编写一个计算宽度的函数（例如calculateScreenWidth） 使用Dimensions.get('window').width并将其设置为screenWidth（或任何您想要的）
• 每次使用react-native-orientation提供的calculateScreenWidth进行orientationChange时调用_orientationDidChange
• 最后，请drawerWidth:this.state.screenWidth。

希望这有帮助。