如何在反应导航中完全更改抽屉的背景颜色答案

【问题标题】：How to change background color of drawer in react-navigation fully如何在反应导航中完全更改抽屉的背景颜色
【发布时间】：2017-07-26 08:48:25
【问题描述】：

如何完全更改抽屉的背景颜色？我不需要更改抽屉项目需要完全更改抽屉的背景颜色。默认情况下，它是白色的，而我需要将其设为绿色。有没有演示示例？

【问题讨论】：

标签： reactjs react-native react-native-android react-native-ios react-navigation

【解决方案1】：

老问题，但这可能会对正在寻找此解决方案的人有所帮助。在createDrawerNavigator 上，您有一个名为drawerBackgroundColor 的drawerConfig 属性。

例子：

import React from 'react';
import { createDrawerNavigator } from 'react-navigation';
import Home from '../screens/Home';
import Screen2 from '../screens/Screen2';

export default createDrawerNavigator({
    Home,
    Screen2
}, {
    drawerPosition: 'left',
    drawerBackgroundColor: '#0000FF',
});

您可以在 React Navigation 文档中阅读更多相关信息：https://reactnavigation.org/docs/en/drawer-navigator.html

【讨论】：

从 React Navigation v6 开始，它现在位于 Drawer.Navigator 的屏幕选项中，如下所示：<Drawer.Navigator screenOptions={{ drawerStyle: { backgroundColor: '#0000FF' } }}>

【解决方案2】：

这个Current例子可以帮到你，这个DrawerNavigtor使用DrawerContent，需要改变DrawerContent的样式

const Main = DrawerNavigator({
  home: { screen: HomePage },
}, {
  drawerWidth: 250,
  drawerPosition: 'right',
  contentComponent: props => <DrawerContent {...props} />,
});

导出默认主程序；您可以使用下面的代码更改样式

class DrawerContent extends Component {
  render() {
    return (
      <ScrollView style={styles.container}>
        <View style={{ flex: 1 }}>
          <Button transparent info onPress={() => { this.handlechange(); }}>
            <Text style={{ fontSize: 16 }}>Change Email</Text>
          </Button>
        </View>
      </ScrollView>
    );
  }
}


const styles = {
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: 'Green',
  },
};

导出默认抽屉内容；这可以改变背景颜色

【讨论】：

它不工作 :( 集成后它只显示白屏，甚至链接都消失了。
你能像我一样发布你的代码，这样我就可以看到哪里遗漏了什么。
当然可以。这是链接：stackoverflow.com/questions/45349482/…
在链接中查看我建议的更改