React-Native StatusBar的隐藏属性在React-Native Modal组件中无法正常工作

Question

我在那里使用react-native的Modal组件，而我正在使用react-native的StatusBar组件。但是当我将hidden props的值设置为true时，它不能正常工作，但是当我使用它时 StatusBar组件在另一个View组件中工作正常。这是一些屏幕截图和我的代码示例

代码示例

      <Modal
        animationType="slide"
        transparent={false}
        visible={this.state.modalVisible}
        onRequestClose={() => this.setModalVisible(false)}
      >
        <StatusBar hidden={true} />
        <VideoPlayer />
      </Modal>

Answer 1

您必须将StatusBar组件保留在包裹View组件的Modal中。 仅在可见StatusBar时隐藏Modal组件。

在您的Modal的父组件中，

render(){
   <View>
       <StatusBar hidden={this.state.isModalVisible}/>
       <Modal visible={this.state.isModalVisible}/>
           ...
       </Modal>
        ...
   </View>
}

isModalVisible变量将同时保存Modal和StatusBar的当前状态