DrawerNavigator：更改背景颜色答案

【问题标题】：DrawerNavigator: Change Background ColorDrawerNavigator：更改背景颜色
【发布时间】：2017-06-30 17:19:03
【问题描述】：

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

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

通过以下方式初始化：

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

【问题讨论】：

标签： reactjs react-native react-navigation

【解决方案1】：

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

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

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

注意事项：

1) ContentOptions 应该在屏幕块之外声明。在内部声明它意味着它是一个屏幕（很明显对吧？！）。

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

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

【讨论】：

【解决方案2】：

它正在工作，像这样放入'createDrawerNavigator'

const MyDrawerNavigator = createDrawerNavigator({

  Home:  MyHomeScreen,    
Notifications: MyNotificationsScreen,

},{
drawerOpenRoute : "DrawerOpen",

drawerCloseRoute: "DrawerClose",

drawerToggleRoute: "DrawerToggle",

drawerBackgroundColor: "#f4511e"
});

【讨论】：

【解决方案3】：

可以通过导航器的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>
  )
}

【讨论】：

不工作我正在使用 import { createDrawerNavigator } from '@react-navigation/drawer';

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

我看到的唯一解决方案是自定义抽屉。您可以使用 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>
);

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

【讨论】：

如果我们想为每条路线使用自定义图标怎么办？
您可以在<Drawer.Screen> 中添加drawerIcon 属性，并传递一个（比如）Ionicons 元素作为值。