android - 根据设备访问屏幕高度

Question

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

与 Android导航栏 (底部黑条)

没有 Android导航栏 (底部黑条)

与 槽口 (大小)

没有 槽口 (大小)

如何访问红色的高度？

我目前正在尝试使用:

react-native-responsive-screen

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

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

Answer 1

您可以使用 measure动态获取 View 高度的方法:

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