ステータスバーの下にあるネイティブアンドロイドツールバー

Question

私は反応ネイティブでステータスバーの色を設定しようとしています。私はreact-native-material-uiをツールバーコンポーネントとして使用しています。私の問題は、ステータスバーの色を設定しているときはいつでも、ツールバーがステータスバーの上下に移動していることです。あなたはオーバーレイを避けるために、ステータスバーの高さのビューを使用する必要がありますhereデモアプリケーションを1として

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

：

私は次のように使用しています：
は、下のスクリーンショットを参照してください。下のコードのようにStatusBarの後：

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