DrawerNavigator：更改背景颜色

Question

在 react-navigation 的 DrawerNavigator 上，有没有办法改变背景颜色？

默认情况下，配色方案如下所示：

由以下内容初始化：

export const Drawer = DrawerNavigator({
    dOne: {
      screen: Screen1,
    },
    dTwo: {
      screen: Screen2,
    }
  }
);

Answer 1

我看到的唯一解决办法是定制你的抽屉。您可以使用 contentComponent 选项自定义它。例如：

const DrawerOptions = {
  contentComponent: CustomDrawerContentComponent,  
  drawerWidth: 300,
}; 

const CustomDrawerContentComponent = (props) => (
  <View style={styles.container}>
    <View style={styles.DrawerHeader}>
      <Text>Coucou</Text>
    </View>
    <View style={styles.DrawerItems}>
    <DrawerItems {...props} />
    </View>
  </View>
);

然后您可以添加您想要的样式作为您的自定义背景颜色。希望对您有所帮助！

Answer 2

React Navigation 为您提供了一种在声明屏幕和屏幕名称后使用 contentOptions 覆盖默认配置的方法。

使用上面的示例，更改背景颜色将如下：

const Drawer = DrawerNavigator(
  {
    dOne: {screen: Screen1},
    dTwo: {screen: Screen2},
  },
  {
    initialRouteName: 'dOne',
    contentOptions: {
       style: {
        backgroundColor: 'black',
        flex: 1
      }
    },
  }
);

注意事项：

1) ContentOptions 应该在屏幕块之外声明。在其中声明它意味着它是一个屏幕（有点明显吧？！）。

2) 抽屉本身就是一个屏幕，通过向 contentOptions 添加样式，您可以像在任何组件中那样执行任何样式。

3) 在没有 flex: 1 的情况下使用 backgroundColor 只会将颜色包裹在您的内容周围，但是当包含 flex 时，它会匹配整个屏幕。

Answer 3

它正在运行，像这样输入 'createDrawerNavigator'

const MyDrawerNavigator = createDrawerNavigator({

  Home:  MyHomeScreen,    
Notifications: MyNotificationsScreen,

},{
drawerOpenRoute : "DrawerOpen",

drawerCloseRoute: "DrawerClose",

drawerToggleRoute: "DrawerToggle",

drawerBackgroundColor: "#f4511e"
});

Answer 4

可以使用导航器的 drawerStyle 道具来完成。

像这样-


const Drawer = createDrawerNavigator()

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        initialRouteName="dOne"
        drawerStyle={{
          backgroundColor: '#111',
        }}
        drawerContentOptions={{
          activeTintColor: '#fff', /* font color for active screen label */
          activeBackgroundColor: '#68f', /* bg color for active screen */
          inactiveTintColor: 'grey', /* Font color for inactive screens' labels */
        }}
      >
        <Drawer.Screen name="dOne" component={dOneScreen} />
        <Drawer.Screen name="dTwo" component={dTwoScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  )
}

Answer 5

<Drawer.Navigator
      screenOptions={{
        drawerStyle: {
          backgroundColor: '#c6cbef',
          width: 240,
        },
      }}
    >
      {/* screens */}
    </Drawer.Navigator>

你可以查看https://reactnavigation.org/docs/screen-options/

DrawerNavigator：更改背景颜色

DrawerNavigator: Change Background Color

reactjs

react-native

react-navigation

注意事项：