列表

Question

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

不变违反：元素类型无效：预期为字符串（对于   内置组件）或类/函数（用于复合组件）   但得到：未定义。您可能忘记了从中导出组件   定义的文件，或者您可能混淆了默认文件并命名为   进口。

检查FlatListDemo的渲染方法。

此错误位于以下位置的：FlatListDemo中（位于withExpoRoot.js：22）   ExpoRootComponent中的RootErrorBoundary（withExpoRoot.js：21）（在   RCTView（位于View.js：44）中的RCTView中的renderApplication.js：34）（位于   AppContainer中的View.js：44）（位于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;

Answer 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或来自React Native的SectionList个组件均可用作视图并显示项目，拉动刷新等等。

ListItem

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

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

重构

另一种选择，也许是更好的选择，尽管可以说它可能需要更多的工作，尽管它可能需要做更多的工作，但它是重构代码，以便它使用v1.0.0中的新组件。您可以在https://react-native-training.github.io/react-native-elements/docs/overview.html

上查看v1.0.0组件的完整列表

Answer 2

正如安德列斯所说，反应本机元素的属性已更改，因此我将发布在我的案例中起作用的代码。

        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;

执行FLATLIST时出现什么错误？

2 个答案:

列表

ListItem

解决方案

降级

重构