我使用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添加到列表中,但这导致它完全消失
1 回答
结果是flex:1就是答案 . 谢谢@kit . 诀窍是将它一直添加到app.js