React Native FlatList不呈現

Question

我正在嘗試將可搜索列表添加到我的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;

我希望列表能夠完全呈現，但事實並非如此。

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>

這是一個工作示例 。