React-native Android Symbolleiste unter Statusleiste gehen

Question

Ich versuche, eine Statusleiste Farbe in nativen reagieren. Ich verwende react-native-material-ui für die Symbolleiste Komponente. Mein Problem ist, dass wenn ich die Farbe der Statusleiste einstelle, die Werkzeugleiste sich nach oben und unter die Statusleiste bewegt.
Siehe die Screenshots unten:

ich folgend bin mit:

const uiTheme = { 
    palette: { 
     primaryColor: COLOR.green500 
    }, 
    toolbar: { 
     container: { 
      height: 56 
     } 
    } 
}; 

export default class RecentChatListScreen extends Component 
{ 
    render() { 
     return (
      <ThemeProvider uiTheme={uiTheme}> 
       <View> 
        <StatusBar backgroundColor="rgba(0, 0, 0, 0.2)" translucent /> 
        <Toolbar 
         leftElement="menu" 
         centerElement="Hola" 
         searchable={{ 
          autoFocus: true, 
          placeholder: 'Search your chats', 
         }} 
         onLeftElementPress={() => this.props.navigation.navigate('DrawerOpen')} 
        /> 
        <Text>List of recent chats.</Text> 
        <Button onPress={() => this.props.navigation.navigate('Chat')} title="Go to Chat"/> 
       </View> 
      </ThemeProvider> 
     ); 
    } 
} 

Answer 1

Gemäß der Demo-Anwendung here Sie einen Blick auf statusbar Höhe Overlay zu vermeiden, verwenden sollten. Wie der folgende Code nach StatusBar:

<View style={{ backgroundColor: COLOR.green500, height: 24 }} />