iphone - React Native 固定页眉/页脚 iphone X

Question

作为学习 ReactNative 的个人项目，我正在构建一个类似 Instagram 的应用程序(固定页眉、页脚和可滚动内容部分)。制作这种布局的最佳实践是什么？

问题是，在 iPhone X 中这效果不太好。如果我使用 SafeAreaView 组件，我可以使页眉部分正常工作，但随后我就失去了正确定位页脚的能力。通过使用以下代码:

render() {
    const {width, height} = Dimensions.get('window');
    return (
      <View style={[{backgroundColor: '#F00'}]}>
        <View style={{backgroundColor: '#AFD', height: 50}}>
          <Text>Head</Text>
        </View>
        <View style={{backgroundColor: '#DFC', height: height-100}}>
          <Text>Body</Text>
        </View>
        <View style={{backgroundColor: '#CDF', height: 50}}>
          <Text>Toes</Text>
        </View>
      </View>
    );
  }

我得到:

如果我使用 SafeAreaView 组件，页眉会好一点，但页脚会完全丢失引用:

  <SafeAreaView style={[{backgroundColor: '#F00'}]}>
    <View style={{backgroundColor: '#AFD', height: 50}}>
      <Text>Head</Text>
    </View>
    <View style={{backgroundColor: '#DFC', height: height-100}}>
      <Text>Body</Text>
    </View>
    <View style={{backgroundColor: '#CDF', height: 50}}>
      <Text>Footer</Text>
    </View>
  </SafeAreaView>

我的最后一个选择是使用 SafeAreaView 作为标题部分，这会使标题太小(如果我不考虑额外的高度，内容会被剪裁，这不会)没有多大帮助)

  <View style={[{backgroundColor: '#F00'}]}>
    <SafeAreaView style={{backgroundColor: '#AFD', height: 50}}>
      <Text>Head</Text>
    </SafeAreaView>
    <View style={{backgroundColor: '#DFC', height: height-100}}>
      <Text>Body</Text>
    </View>
    <View style={{backgroundColor: '#CDF', height: 50}}>
      <Text>Footer</Text>
    </View>
  </View>

那么，实现这种布局的最佳实践是什么？另外，除了文档之外，ReactNative 中的布局还有什么好的资源吗？

提前致谢!

Answer 1

使用https://github.com/miyabi/react-native-safe-area模块。它非常易于使用并且可以根据要求工作。适用于不同的 iOS 版本，自动调整方向变化。您只需addEventListener，所有操作都会自动处理。

按照 https://github.com/miyabi/react-native-safe-area#installation 的说明进行操作