如何设计抽屉的样式 - Expo 导航

Question

我是 React Native 的新手。我试图添加一个抽屉导航器，默认情况下它是蓝色的，有没有办法改变这种颜色？我正在使用本机基础库，这是我的代码的屏幕截图和片段，以阐明我的要求。谢谢我的 app.js 中的抽屉组件结构如下：

const CustomDrawerComponent = (props) => (
  <SafeAreaView style={{ flex:1, marginTop:12 }}>
    <View style={{ height: 150, backgroundColor: 'white', alignItems: 'center', justifyContent:'center' }}>
      <Image source={require('./assets/icon.png')} style={{height:120,width:120,borderRadius:60}}/>
    </View>
    <ScrollView>
      <DrawerItems {...props}/>
    </ScrollView>
  </SafeAreaView>
)

这也是其中一个屏幕：

class LibraryScreen extends React.Component {
  static navigationOptions = {
    drawerIcon : ({tintColor}) => (
      <Icon name="home" style={{fontSize:24, color:tintColor}}/>
    )
  }
  render() {
    return (
      <View style={styles.container}>
        <Header>
          <Left style={{justifyContent:"flex-start",flex:1,marginTop:20}}>
            <Icon name="menu" onPress={()=>this.props.navigation.openDrawer()}/>
          </Left>
        </Header>
        <View style={{flex:1, alignItems:'center', justifyContent:'center'}}>
          <Text>Library Screen</Text>
        </View>
      </View>
    );
  }
}

export default LibraryScreen;

Answer 1

向 <Header> 组件添加样式

<Header
      style={{
        backgroundColor: 'red',
      }}>

完整代码

class LibraryScreen extends React.Component {
  static navigationOptions = {
  drawerIcon : ({tintColor}) => (
    <Icon name="home" style={{fontSize:24, color:tintColor}}/>
  )
 } 
 render() {
  return (
      <View style={styles.container}>
       <Header
        style={{ backgroundColor: 'red' }}>
        <Left style={{justifyContent:"flex-start",flex:1,marginTop:20}}>
          <Icon name="menu" onPress={()=>this.props.navigation.openDrawer()}/>
        </Left>
      </Header>
      <View style={{flex:1, alignItems:'center', justifyContent:'center'}}>
        <Text>Library Screen</Text>
      </View>
    </View>
    );
  }
}

导出默认的 LibraryScreen；

如何设计抽屉的样式 - Expo 导航

How to style the Drawer - Expo navigation

navigation-drawer

react-native

expo