如何设计抽屉式 - 世博导航

Question

我是新来的本地人。我试图添加一个抽屉导航器，默认情况下它是蓝色的，有没有办法改变这种颜色？我正在使用本机库，这是我的代码的截图和片段，以澄清我的要求。我的app.js中的Thanks抽屉组件的结构如下：

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;