根据设备访问屏幕高度答案

【问题标题】：Access to screen height depending on the device根据设备访问屏幕高度
【发布时间】：2020-09-04 03:29:53
【问题描述】：

以下是手机屏幕的各种情况：

带有 Android 导航栏（底部黑条）
不带 Android 导航栏（底部黑条）
带有槽口（小号和大号）
没有槽口（小号和大号）

如何访问红色的高度？

我目前正在尝试使用：

react-native-responsive-screen

但它并不总是很好用。当我在带有凹口的屏幕上测试时可以，但是当我在另一台设备上测试时，高度不匹配

当我在没有 Android 导航栏的设备上做某事时，当我在手机上使用此栏运行应用程序时，它会覆盖一部分

【问题讨论】：

标签： android ios iphone react-native

【解决方案1】：

您可以使用measure 方法动态获取您的视图高度：

class YourComponent extends React.Component {
  componentDidMount() {
    setTimeout(
      () =>
        this.mainView.measure((fx, fy, width, height, px, py) => {
          console.log(`Component width is: ${width}`);
          console.log(`Component height is: ${height}`);
          console.log(`X offset to frame: ${fx}`);
          console.log(`Y offset to frame: ${fy}`);
          console.log(`X offset to page: ${px}`);
          console.log(`Y offset to page: ${py}`);
        }),
      0
    );
  }

  render() {
    return (
      <View ref={ref => this.mainView = ref}>
        {/* content */}
      </View>
    );
  }
}

别忘了用 SafeAreaView 包裹你的 mainView

【讨论】：

【解决方案2】：

您可以使用第一次渲染时返回的View onLayout

const redView = () => {
  return
  <View
    style={styles.redStyle}
    onLayout={({nativeEvent}) =>
      console.log(nativeEvent.layout.height)
    }
  />
}

【讨论】：