В чем заключается ошибка при выполнении FLATLIST?

При выполнении отправляет мне следующую ошибку, знаете ли вы, что я делаю неправильно? Я использовал код, который опубликован

Нарушение инварианта: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Вы, вероятно, забыли экспортировать свой компонент из файла, в котором он определен, или вы могли смешать импорт по умолчанию и с именами.

Проверьте метод рендеринга FlatListDemo.

Эта ошибка находится по адресу: в FlatListDemo (в withExpoRoot.js:22) в RootErrorBoundary (в withExpoRoot.js:21) в ExpoRootComponent (в renderApplication.js:34) в RCTView (в View.js:44) в RCTView (в View.js:44) в AppContainer (в renderApplication.js: 33)

node_modules \ реагировать-родной \Libraries\Renderer\oss\ReactNativeRenderer-dev.js:5630:10 в createFiberFromElement node_modules\ реагировать-нативный \ Библиотеки \Renderer\oss\ReactNativeRenderer-dev.js:9710:8 в reccileSingleElement ... 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;
Источник

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;
Источник

Похоже, что вы следовали этому руководству на носителе 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 был просто обычный React Native View с некоторыми небольшими стилями полей. На самом деле не было необходимости использовать ListItem составная часть. Вместо этого мы рекомендуем использовать FlatList или же SectionList компоненты из React Native, которые функционируют как представления, а также отображают элементы, обновляются и многое другое.

Элемент списка

roundAvatar а также avatarбыли отброшены и больше не используются.

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

avatar, avatarStyle, avatarContainerStyle, roundAvatar, а также avatarOverlayContainerStyle удален. Аватары теперь могут быть настроены с помощью rightAvatar а также leftAvatar реквизиты, которые могут визуализировать пользовательский элемент или объект, который описывает реквизиты из Аватара.

Решение

У вас есть два варианта.

  1. Понижение до v0.19.1
  2. Рефакторинг вашего кода для v1.0.0

упадок

Самое простое (хотя это может не сработать, поскольку могут быть проблемы с совместимостью с более новыми версиями реагировать на нативную версию), это понизить версию 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

Refactor

Другой выбор, и, возможно, лучший выбор, хотя, возможно, это потребует больше работы, заключается в рефакторинге вашего кода, чтобы он использовал новые компоненты из v1.0.0, Вы можете увидеть полный список v1.0.0 компоненты здесь https://react-native-training.github.io/react-native-elements/docs/overview.html

Источник
Другие вопросы по тегам