DrawerNavigator：更改背景颜色

Question

On react-navigation's DrawerNavigator，有没有办法改变背景颜色？

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

由以下初始化：

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

Answer 1

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

您可以检查https://reactnavigation.org/docs/screen-options/

Answer 2

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

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

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

注意事项：

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

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

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