[英]React Native FlatList doesn't render
我正在尝试将可搜索列表添加到我的React Native应用程序中,但是在尝试呈现列表本身时遇到问题。 错误是旧的“您可能忘记了从定义其的文件中导出组件,或者您可能混淆了默认导入和命名导入”。 我确定这可能是我的问题,但是在在线阅读了该问题的几种变体之后,我似乎无法弄清楚问题出在哪里。
我尝试过以一种逐一列出的方式更改所有已使用的导入,并使用和删除括号。 我尝试重新安装react-native-elements,并检查我的依赖项是否有正确的版本。 还尝试了没有数据的渲染列表。
列表组件:Liste.js
import { View, Text, FlatList } from "react-native";
import {List, ListItem } from "react-native-elements"
class Liste extends Component {
constructor(props) {
super(props);
...
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<List>
<FlatList
data={this.state.data}
renderItem={({ item }) => (
<ListItem
roundAvatar
title={`${item.name.first} ${item.name.last}`}
subtitle={item.email}
avatar={{ uri: item.picture.thumbnail }}
/>
)}
/>
</List>
</View>
);
}
}
export default Liste;
我希望列表能够完全呈现,但事实并非如此。
首先,您需要删除List
组件,因为react-native-elements
不包含它。
您需要做的第二件事是从View
组件中删除alignItems: "center", justifyContent: "center"
。
另外,在FlatList
组件中,属性avatar
是错误的。 您必须选择: leftAvatar
和rightAvatar
。
您普通人应该看起来像这样:
<View style={{ flex: 1 }}>
<FlatList
data={this.state.data}
renderItem={({ item }) => (
<ListItem
roundAvatar
title={item.title}
subtitle={item.body}
leftAvatar={{
source: item.thumbnail && { uri: item.thumbnail },
}}
/>
)}
/>
</View>
这是一个工作示例 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.