反应原生固定页眉/页脚 iphone X答案

【问题标题】：React native Fixed header / footer iphone X反应原生固定页眉/页脚 iphone X
【发布时间】：2017-12-11 14:35:20
【问题描述】：

作为一个学习 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 中的布局还有什么好的资源吗？

提前致谢！

【问题讨论】：

标签： iphone react-native react-native-ios

【解决方案1】：

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

听从https://github.com/miyabi/react-native-safe-area#installation的指示

【讨论】：