如何在顯示react-native模式時隱藏statusBar？

Question

當模式窗口顯示時，我想隱藏狀態欄。

我的設置是如下，但預期它不會工作：

<StatusBar animated={true} hidden={true} translucent={true}> 

Answer 1

這是一個已知的問題而且似乎是沒有官方/做出反應的方式來解決它。您可以按照這裏的討論：

https://github.com/facebook/react-native/issues/7474

我看到這個討論其中提出了黑客隱藏它後，但我還沒有嘗試過在我的項目。如果它適合你，你也可以使用這個技巧。

<View style={styles.outerContainer} 
    <View style={styles.container}> 
    <StatusBar hidden={true}/> 
    <View style={styles.content}> 
    </View> 
    <Modal animation={fade} transparent={true}> 
      {/*Modal Contents Here*/} 
    </Modal> 
</View> 

更可靠的修復可能會改變原生android代碼中活動的主題。

<resources> 
    <!-- Base application theme. --> 
    <style name="AppTheme" parent="Theme.ReactNative.AppCompat.Light.NoActionBar.FullScreen"> 
     <!-- Customize your theme here. --> 
    </style> 
    <style name="AppTheme.Launcher"> 
     <item name="android:windowBackground">@drawable/launch_screen</item> 
    </style> 
</resources> 

現金去Traviskn和mbashiq誰提出上述修正。我建議你訂閱issue。

Answer 2

根據該文檔，你應該能夠隱藏不論是iOS狀態欄，並採用了Android這個

import {StatusBar} from 'react-native'; 
StatusBar.setHidden(true);