React Native FlatList 占用多余空间导致底部按钮被遮挡如何解决

问题原因 #

父容器BaseScreenCenterTop为弹性纵向布局，但是FlatList的外层容器没有设置弹性占比，当FlatList内容较多时，会自动撑开容器高度，占用底部按钮的显示空间，导致按钮被挤出可视区域。

修复步骤 #

只需要修改主组件中包裹FlatList的View样式，给它添加flex: 1让其占据父容器扣除固定元素后的所有剩余高度，同时补充width: 100%适配父容器居中对齐的规则即可。
修改后的主组件代码如下：

<BaseScreenCenterTop>
  <View style={{backgroundColor: 'green', height: 30, width: '100%'}}>
  </View>
  {/* 仅修改这一行的style属性 */}
  <View style={{flex: 1, width: '100%'}}>
    <FlatList
      data={doc.items}
      renderItem={({ item }) => renderItem(item)}
      keyExtractor={item => item.id}
    />
  </View>
  <View>
    <Button
      title="Test"
    />
  </View>
</BaseScreenCenterTop>

原理解释 #

React Native的Flex布局规则中，纵向排列的弹性容器内，无flex属性的子元素会优先按照自身内容/样式高度占位，剩余的所有空间会全部分配给带有flex: 1属性的子元素。这样修改后FlatList只会在分配到的剩余空间内滚动，顶部固定条和底部按钮都会固定在对应位置，不会被挤压出可视区域。

内容的提问来源于stack exchange，提问作者David Dimitrie