javascript - React Native 获取内容的可用高度

Question

我有一个自定义组件，需要明确设置其高度。我在计算不同设备上的可用空间时遇到问题。

顶部栏没有问题，因为我使用 StatusBar 高度，但在底部，iPhone X 有一些空间用于该“栏”，我不知道如何计算它(我可以匹配设备，但也许底部有更多设备)。

有什么办法可以计算吗？顺便说一句，我正在使用 Expo。

Answer 1

我不知道您的主要目标是什么，但这是我的建议:

1. 如果您想计算可用高度，可以创建一个样式为 {flex:1} 的 View，然后使用 onLayout View 的内置函数。这是它的工作原理:

   onLayout=({nativeEvent})=>{
      // Here is height
      console.warn(nativeEvent.layout.height)
   }
   
   <View style={styles.container}>
      <YourComponents/>
      {/*The part you want to calculate height*/}
      <View style={{flex:1}} onLayout={onLayout}/>
   </View>
   

2. 如果您只想避开设备的凹口，可以使用SafeAreaView。 Here是完整的文档。附言。 react-native 的内置 SafeAreaView 组件已移至 react-native-safe-area-view