Как оформить ящик - Экспо навигация - PullRequest
0 голосов
/ 30 апреля 2019

Я новичок, чтобы реагировать на родных.Я пытался добавить навигатор ящика, и по умолчанию он синий, есть ли способ изменить этот цвет?Я использую базовую библиотеку, вот скриншот и фрагменты моих кодов, чтобы уточнить, что я спрашиваю.Спасибо enter image description here Компонент Drawer в моем 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;

1 Ответ

0 голосов
/ 30 апреля 2019

Добавление стиля к компоненту <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;

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...