如何充分改变反应导航中抽屉的背景颜色

Question

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

Answer 1

这个当前的例子可以帮到你，这个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',
  },
};

export default DrawerContent;这可以改变背景颜色