抽屉导航器无论我做什么都无法将背景设置为透明

Question

我花了超过几个小时试图将抽屉导航器的背景更改为透明，但没有任何成功。当我写作时当我在主组件中更改它时，它可以工作

const MainTabBarDrawer = DrawerNavigator({
Home:{
    screen:MainTabNavigator,
},
},{
drawerWidth: 200,
drawerPosition: 'right',
// contentComponent: props => <Text style={{color:'white'}} >text 
</Text>,
drawerBackgroundColor: 'yellow',
//backgroundColor:'transparent',
// style: {
// //backgroundColor: 'transparent',
// flex: 1
// },
// contentOptions: {
//     style: {
//     backgroundColor: 'transparent',
//     flex: 1
// }

},
{
style: {
    backgroundColor: 'transparent',
        flex:1
}
}
)

class App extends Component{
render()
{
return(<MainTabBarDrawer style={{backgroundColor: 'transparent'}}/>)
//return(<Login/>)
}
}

虽然上述方法可以工作，但我的布局要复杂得多，我不希望抽屉出现在我的所有视图中。所以任何身体都知道我是否可以直接更改抽屉导航器的背景而不将其渲染为组件？

Answer 1

在 React Navigation 5 中，这将是：

<Drawer.Navigator
  initialRouteName={...}
  drawerContent={...}
  drawerStyle={{backgroundColor: 'transparent'}}
>

Answer 2

将drawerBackgroundColor: "transparent"添加到抽屉配置。

Answer 3

我认为您正在寻找drawerContentOptions或drawerStyle Drawer.Navigator

 <NavigationContainer>
      <Drawer.Navigator
         ..........
        drawerPosition="left"
        drawerContentOptions={{
          activeBackgroundColor:"transparent", //here change it     
        }}
        drawerStyle={{backgroundColor: 'transparent'}} //or here
        initialRouteName="Splash">
        <Drawer.Screen        
          name="HomePage"
          component={StackScreen}
           
          options={{            
            drawerLabel: () => {return null},
            title:null,
            drawerIcon: () => {return <AppIconImage/>}
             
          }}
        />
      </Drawer.Navigator>
    </NavigationContainer>

Answer 4

自从我更新到最新版本以来，该问题已修复1.0.0-贝塔.16

Answer 5

对于 ReactNavigation 版本 6。

尝试

    <Drawer.Navigator
     initialRouteName={...}
     drawerContent={...}
      screenOptions={{
        drawerStyle: {
          backgroundColor: 'transparent',
        },
      }}>

添加 React 文档链接以供参考。

https://reactnavigation.org/docs/drawer-navigator#drawerstyle

Answer 6

将样式backgroundColor: 'transparent'添加到 drawerStyle 在屏幕内 抽屉.导航器的选项参数对我有用。

import React from 'react';
import {createDrawerNavigator} from '@react-navigation/drawer';
import CustomDrawer from '../components/Drawer';
const Drawer = createDrawerNavigator();
const DrawerNavigator = () => {
  return (
    <Drawer.Navigator
      initialRouteName="Stack"
      screenOptions={{
        headerShown: false,
        drawerStyle: {width: '80%', backgroundColor: 'transparent'}, // Add this.
      }}
      drawerContent={props => <CustomDrawer {...props} />}>
      // Screens that go inside the navigator.
    </Drawer.Navigator>
  );
};
export default DrawerNavigator;

PS：我正在使用@react-navigation/drawer: ^6.5.0。