如何从反应本机抽屉项目中删除填充或 space

Question

我想从 React Native 抽屉项目中删除左右空格。我该怎么做？我试过以下代码，但没有用：

<Drawer.Navigator initialRouteName={Dashboard} screenOptions={{
                drawerActiveBackgroundColor: 'orange',
                drawerActiveTintColor: '#fff',
                drawerInactiveTintColor: '#000',
                headerShown: false,

                sceneContainerStyle: {
                    padding: 0,
                    margin: 0,
                },
                drawerStyle: {
                    padding: 0,
                    margin: 0,
                },
                drawerLabelStyle: {
                    fontSize: 15
                }
            }}>
                <Drawer.Screen options={{
                    margin: 0,
                    width: '100%'
                }} name="Dashboard" component={Dashboard} />

                <Drawer.Screen name="My Trips" component={Dashboard} />

                <Drawer.Screen name="Emergency Contacts" component={Dashboard} />

                <Drawer.Screen name="Saved Locations" component={Dashboard} />
            </Drawer.Navigator>

Answer 1

尝试使用您的自定义组件，我们需要在 drawerContent prop

中传递它

<Drawer.Navigator drawerContent={(props) => <CustomDrawerContent {...props} />}>
  {/* screens */}
</Drawer.Navigator>

更多详情Here

Answer 2

我正在处理这个。您可以在 Navigator 的屏幕选项中的 drawerItemStyle 中执行此操作：

<Stack.Navigator
   screenOptions={(navigation) => ({
      drawerItemStyle: {
         borderRadius: 0,
         width: '100%',
         marginLeft: 0
      }
  })}
>

如何从反应本机抽屉项目中删除填充或 space

How to remove padding or space from react native drawer items

navigation-drawer

react-native