时间戳

首页 > 解决方案 > React Native FlatList 不呈现

javascript - React Native FlatList 不呈现

问题描述

我正在尝试将可搜索列表添加到我的 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;

我希望列表完全呈现，但它没有。

标签： javascriptreactjsreact-nativereact-native-elements

解决方案

  • 首先，您需要删除该List组件，因为react-native-elements它不包含它。

  • 您需要做的第二件事是alignItems: "center", justifyContent: "center"从View组件中删除。

  • 另外，在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>

这是一个工作演示。

推荐阅读