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

Question

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

• 带安卓导航栏（底部黑条）

• 无Android导航栏（底部黑条）

• 带槽口（小号和大号）

• 没有缺口（小和大）

如何访问红色的高度？

我目前正在尝试使用：

反应本机响应屏幕

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

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

Answer 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

Answer 2

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

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