当在其之前呈现其他组件时，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