Question

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

问题是，在iPhone X中，这并不能很好地发挥作用。如果我使用SafeAreaView组件，我可以让Header部分工作，但后来我失去了正确定位页脚的能力。使用以下代码：

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作为标题部分，然后使标题太小（如果我不考虑额外的高度，内容会被剪裁，这不会导致＃39} ; t帮助那么多）

  <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.

1 个答案: