React Native FlatList 不呈现

Question

我正在尝试将可搜索列表添加到我的 React Native 应用程序，但在尝试呈现列表本身时遇到了问题。错误是旧的"You likely forgot to export your component from the file its defined in, or you might have mixed up default and named imports"。我确定这可能是我的问题，但在网上阅读了该问题的多种变体后，我似乎无法弄清楚问题出在哪里。

我已经尝试以使用和删除括号的方式逐一列出它们来更改所有使用过的导入。我尝试重新安装 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;

我本来希望列表能够呈现，但它没有。

Answer 1

首先，您需要删除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>

这是工作 demo。

React Native FlatList 不呈现

React Native FlatList doesn't render

javascript

reactjs

react-native

react-native-elements