React-native android工具欄正在狀態欄下方

-1

我試圖在反應本機中設置狀態欄顏色。我正在使用react-native-material-ui作爲工具欄組件。我的問題是，無論何時設置狀態欄顏色，工具欄都在狀態欄的上方和下方移動。
請參見下面的截圖：
React-native android工具欄正在狀態欄下方

我使用了以下內容：

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> 
     ); 
    } 
}

來源

2017-10-21 Ayan

您是否嘗試在另一個視圖內包裝工具欄，文本和按鈕？ – Srijith

@Srijith是的，我做了，但不幸的是沒有發生。 – Ayan

有人可以告訴我爲什麼它投下了票？如果這個問題不可理解，我很想改善這個問題。 – Ayan

按照演示程序here你應該使用狀態欄的高度的視圖，以避免疊加。像StatusBar之後的代碼：

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

來源

2017-10-21 17:37:26 Srijith

好吧，我會嘗試這和通知。順便說一下在IOS上呢？ – Ayan

它正在工作，但我如何調整IOS和iPhone X？ – Ayan

React-native android工具欄正在狀態欄下方

回答

相關問題