react-native：android：带有软菜单的模态高度

Question

在具有软底部菜单栏的Samsung Galaxy S8上，我的全屏模式组件以全屏高度随机渲染，或者为软菜单栏留出空间。此行为是完全随机的，并且仅限于Modal个组件。我正在使用0.57.5的react-native的最新版本，但这已经在多个版本中发生。

我正在使用全屏AppTheme样式，如下所示：

<style name="AppTheme" parent="Theme.ReactNative.AppCompat.Light.NoActionBar.FullScreen">

状态栏也这样隐藏：

StatusBar.setHidden(true);

从屏幕快照中可以看到，在Modal决定不以全高度渲染的情况下，背景会流血。

有人遇到并解决过这样的问题吗？

Answer 1

对于其他任何人，如果您根据文档使用react-native-modal，则必须使用react-native-extra-dimensions-android。

  

React-Native在检测某些设备的正确设备宽度/高度时存在一些问题。   如果遇到此问题，则需要安装react-native-extra-dimensions-android。   然后，将实际的窗口高度（从react-native-extra-dimensions-android获取）提供给模态：

  render() {
  const deviceWidth = Dimensions.get("window").width;
  const deviceHeight = Platform.OS === "ios"
    ? Dimensions.get("window").height
    : require("react-native-extra-dimensions-android").get("REAL_WINDOW_HEIGHT");

  return (
  <Modal
    isVisible={this.state.isVisible}
    deviceWidth={deviceWidth}
    deviceHeight={deviceHeight}
  >
    <View style={{ flex: 1 }}>
      <Text>I am the modal content!</Text>
    </View>
  </Modal>
  )
}

https://github.com/react-native-community/react-native-modal