1

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

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

检查 FlatListDemo 的渲染方法。

此错误位于：在 FlatListDemo (at withExpoRoot.js:22) in RootErrorBoundary (at withExpoRoot.js:21) in ExpoRootComponent (at renderApplication.js:34) in RCTView (at View.js:44) in RCTView (at 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;
4

2 回答 2

2

看起来您在中等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，一些组件被丢弃，而其他组件则被更改。有关它们的完整列表，您应该在他们的网站上查看此博客文章。在这里复制太长了，但我将重复与您的具体情况相关的部分。

列表

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

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

List 组件已被删除！ List只是一个带有一些小边距样式的常规 React Native View。实际上并不需要使用该ListItem组件。相反，我们建议使用 React Native 中的FlatList或 SectionList组件，它们既可以用作视图，也可以显示项目，拉动刷新等等。

项目清单

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删除。Avatars 现在可以使用rightAvatar和leftAvatarprops 进行自定义，它们可以呈现自定义元素或描述 Avatar 中的道具的对象。

解决方案

你有两个选择。

  1. 降级到v0.19.1
  2. 重构你的代码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

于 2019-02-02T17:01:18.703 回答
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;
于 2019-02-05T18:48:10.910 回答