Android 根据设备访问屏幕高度

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

• 使用Android导航栏（底部黑色栏）

• 没有Android导航栏（底部黑条）

• 带槽口的（大小）

• 无缺口（大小）

如何访问红色的高度？

我目前正在尝试使用：

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

---

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

您可以使用

测量

方法动态获取视图高度：

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>
    );
  }
}

class YourComponent扩展了React.Component{
componentDidMount（）{
设置超时(
() =>
这个.mainView.measure（（fx，fy，宽度，高度，px，py）=>{
log（`组件宽度为：${width}`）；
log（`组件高度为：${height}`）；
log（`X到帧的偏移量：${fx}`）；
log（`Y到帧的偏移量：${fy}`）；
log（`X页偏移量：${px}`）；
log（`Y到页面的偏移量：${py}`）；
}),
0
);
}
render（）{
返回(
this.mainView=ref}>
{/*内容*/}
);
}
}

---

不要忘记用

安全区域视图

包装主视图。您可以使用第一次渲染时返回的

视图

联机布局

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

const redView=（）=>{
返回
console.log（nativeEvent.layout.height）
}
/>
}