【问题标题】：What is the error when executing a FLATLIST?执行 FLATLIST 时的错误是什么？
【发布时间】：2019-01-31 23:43:27
【问题描述】：

执行时向我发送以下错误，你知道我做错了什么吗？我使用了发布的代码

Invariant Violation：元素类型无效：应为字符串（对于内置组件）或类/函数（用于复合组件）但得到：未定义。您可能忘记从定义它的文件，或者您可能混淆了默认值和命名进口。

检查 FlatListDemo 的渲染方法。

此错误位于：在 FlatListDemo (at withExpoRoot.js:22) 中 ExpoRootComponent (at withExpoRoot.js:21) 中的 RootErrorBoundary (at withExpoRoot.js:21) renderApplication.js:34) 在 RCTView (在 View.js:44) 在 RCTView (在 View.js:44) 在 AppContainer (在 renderApplication.js:33)

node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:5630:10 在 createFiberFromElement node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:9710:8 在 reconcileSingleElement ... 来自框架的另外 21 个堆栈帧内部结构

import React, { Component } from "react";
import { View, Text, FlatList, ActivityIndicator } from "react-native";
import { List, ListItem, SearchBar } from "react-native-elements";

class FlatListDemo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      data: [],
      page: 1,
      seed: 1,
      error: null,
      refreshing: false
    };
  }

  componentDidMount() {
    this.makeRemoteRequest();
  }

  makeRemoteRequest = () => {
    const { page, seed } = this.state;
    const url = `https://randomuser.me/api/?seed=${seed}&page=${page}&results=20`;
    this.setState({ loading: true });

    fetch(url)
      .then(res => res.json())
      .then(res => {
        this.setState({
          data: page === 1 ? res.results : [...this.state.data, ...res.results],
          error: res.error || null,
          loading: false,
          refreshing: false
        });
      })
      .catch(error => {
        this.setState({ error, loading: false });
      });
  };

  handleRefresh = () => {
    this.setState(
      {
        page: 1,
        seed: this.state.seed + 1,
        refreshing: true
      },
      () => {
        this.makeRemoteRequest();
      }
    );
  };

  handleLoadMore = () => {
    this.setState(
      {
        page: this.state.page + 1
      },
      () => {
        this.makeRemoteRequest();
      }
    );
  };

  renderSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: "86%",
          backgroundColor: "#CED0CE",
          marginLeft: "14%"
        }}
      />
    );
  };

  renderHeader = () => {
    return <SearchBar placeholder="Type Here..." lightTheme round />;
  };

  renderFooter = () => {
    if (!this.state.loading) return null;

    return (
      <View
        style={{
          paddingVertical: 20,
          borderTopWidth: 1,
          borderColor: "#CED0CE"
        }}
      >
        <ActivityIndicator animating size="large" />
      </View>
    );
  };

  render() {
    return (
      <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
        <FlatList
          data={this.state.data}
          renderItem={({ item }) => (
            <ListItem
              roundAvatar
              title={`${item.name.first} ${item.name.last}`}
              subtitle={item.email}
              avatar={{ uri: item.picture.thumbnail }}
              containerStyle={{ borderBottomWidth: 0 }}
            />
          )}
          keyExtractor={item => item.email}
          ItemSeparatorComponent={this.renderSeparator}
          ListHeaderComponent={this.renderHeader}
          ListFooterComponent={this.renderFooter}
          onRefresh={this.handleRefresh}
          refreshing={this.state.refreshing}
          onEndReached={this.handleLoadMore}
          onEndReachedThreshold={50}
        />
      </List>
    );
  }
}

export default FlatListDemo;

【问题讨论】：

您好，您确定roundAvatar 正在处理ListItem 吗？您可以尝试将其删除并重新编译吗？

标签： react-native react-native-flatlist react-native-elements

【解决方案1】：

您似乎在媒体 https://medium.freecodecamp.org/how-to-build-a-react-native-flatlist-with-realtime-searching-ability-81ad100f6699 上关注本教程

不幸的是，本教程是在 react-native-elements 升级到 v1.0.0 之前编写的。当react-native-elements 被升级时，一些组件被删除了，而其他的则被改变了。有关他们的完整列表，您应该在他们的网站上看到这个blog post。此处复制太太长了，但我将重复与您的具体情况相关的部分。

列表

这已被删除，这可能是导致您在尝试导入不再存在的内容时看到的大错误的原因。

https://react-native-training.github.io/react-native-elements/blog/2019/01/27/1.0-release.html#list

List 组件已被移除！ List 只是一个普通的 React Native 使用一些小边距样式查看。它实际上不需要使用 ListItem 组件。相反，我们建议使用FlatList 或 SectionList 来自 React Native 的组件，它们都用作视图以及显示项目、拉动刷新等等。

列表项

roundAvatar 和 avatar 已被删除，不再使用。

https://react-native-training.github.io/react-native-elements/blog/2019/01/27/1.0-release.html#listitem

avatar、avatarStyle、avatarContainerStyle、roundAvatar 和 avatarOverlayContainerStyle 已删除。现在可以自定义头像使用 rightAvatar 和 leftAvatar 可以渲染描述 Avatar 中道具的自定义元素或对象。

解决方案

你有两个选择。

降级到v0.19.1
为v1.0.0重构你的代码

降级

最简单的（尽管这可能不起作用，因为可能与较新版本的 react-native 存在兼容性问题）是降级您的 react-native-elements 版本。

您可以通过运行npm uninstall react-native-elements 来做到这一点

然后重新安装具体版本npm install react-native-elements@0.19.1

您可以在此处查看v0.19.1 组件的完整列表https://react-native-training.github.io/react-native-elements/docs/0.19.1/overview.html

重构

另一个选择，也可能是更好的选择，虽然可以说它需要更多的工作，是重构您的代码，以便它使用来自v1.0.0 的新组件。您可以在此处查看v1.0.0 组件的完整列表https://react-native-training.github.io/react-native-elements/docs/overview.html

【讨论】：

效果不错，到处搜索后发现我不需要列表组件，我会把解决方案发布给和我有同样问题的人，谢谢你的帮助。

【解决方案2】：

正如 Andres 所说，react-native 元素的某些属性发生了变化，因此我将发布在我的案例中有效的代码。

        import React, { Component } from "react";
    import { View, Platform, Image, Text,  FlatList, ActivityIndicator } from "react-native";
    import { ListItem, List } from "react-native-elements";

    class FlatListDemo extends Component {
      constructor(props) {
        super(props);

        this.state = {
          loading: false,
          data: []
        }
      }

      componentDidMount() {
        this.makeRemoteRequest();
      }

      makeRemoteRequest = () => {
        const url = 'https://randomuser.me/api/?seed=1&page=1&results=20';
        this.setState({ loading: true });

        fetch(url)
          .then(res => res.json())
          .then(res => {
            this.setState({
              data: res.results,
              loading: false,
            });
          });
      };

      render() {
        return (
          <View>

            <FlatList
              data={this.state.data}
              renderItem={({ item }) => (
                <ListItem
                title={
                  <View >
                    <Image style={{height:50}} source={require('./src/img/recarga.jpg')}>
                    </Image>
                    <Text>{item.name}</Text>
                  </View>
                }
                subtitle={item.email}
                />
              )}
              keyExtractor={item=>item.email}
            />
          </View>
        );
      }
    }

    export default FlatListDemo;

【讨论】：