Question

我花了不少时间试图将DrawerNavigator的背景更改为透明而没有任何成功。当我写作当我在主要组件中更改它时，它可以工作

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/>)
}

}

虽然上述方法可行但我的布局非常复杂，我不希望抽屉出现在我的所有视图中。让任何身体知道如果我可以直接改变DrawerNavigator的背景而不将其作为一个组件渲染？

Answer 1

在React Navigation 5中，这将是：

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

Answer 2

将drawerBackgroundColor: "transparent"添加到drawerConfig。

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-beta.16

无论我做什么，DrawerNavigator都不能将背景设置为透明？

4 个答案: