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

的说明进行操作

React native 固定页眉/页脚 iphone X

React native Fixed header / footer iphone X

iphone

react-native

react-native-ios