首页 文章

当在其之前呈现其他组件时,ReactNative FlatList不完全可见

提问于
浏览
0

我使用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添加到列表中,但这导致它完全消失

enter image description here

1 回答

  • 0

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

相关问题