ReactNative FlatList 在有其他组件在其之前渲染时不完全可见

Question

我在使用 React Native FlatList 时遇到一个奇怪的问题（同样的问题出现在 sectionList 和 ListView 上）

当 Flatlist 是屏幕上的唯一组件时，它工作正常。但是当在它之前呈现其他组件时，例如文本组件，则列表的最后一项不可滚动。

这里的示例代码非常简单：

import React, { Component } from 'react';
import { Modal, Text, TouchableHighlight, View, Alert, FlatList } from 'react-native';

export default class ModalExample extends Component {
  data = [];

  constructor(props) {
    super(props);

    this.state = {};

    for(var i = 0; i < 200; i++)
    {
      this.data.push('test string' + i);
    }
  }

  render() {
    return (
      <View>
        <Text>This is a test</Text>
        <Text>This is a test</Text>
        <Text>This is a test</Text>
        <FlatList
          data={this.data}
          renderItem={({ item }) => <Text>{item}</Text>}
        />
      </View >
    );
  }
}

你可以在下图中看到，如果我一直滚动，我看到第 196 项，最后 3 项根本没有显示。我尝试将 flex:1 添加到列表中，但这导致它完全消失了

Answer 1

结果 flex:1 就是答案。谢谢@kit。诀窍是一直添加到 app.js

ReactNative FlatList 在有其他组件在其之前渲染时不完全可见

ReactNative FlatList is not fully visible when there are other components rendered before it

react-native

react-native-flatlist