根据设备访问屏幕高度

Posted 2023-05-06

【中文标题】根据设备访问屏幕高度

【英文标题】：Access to screen height depending on the device

【发布时间】：2020-09-04 03:29:53

【问题描述】：

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

带有 Android 导航栏（底部黑条）

不带 Android 导航栏（底部黑条）

带有槽口（小号和大号）

没有槽口（小号和大号）

如何访问红色的高度？

我目前正在尝试使用：

react-native-responsive-screen

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

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

【参考方案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)
    
  />