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

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

0 голосов
/ 01 февраля 2019

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

Нарушение инварианта: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: 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 \ реагировать-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js: 5630: 10 в createFiberFromElement node_modules \ реагировать-native \ Libraries \ Renderer \ oss\ ReactNativeRenderer-dev.js: 9710: 8 в согласовании SingleElement ... еще 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 ]

0 голосов
/ 05 февраля 2019

Как говорит Андрес, некоторые свойства реактивно-нативных элементов изменились, поэтому я опубликую код, который в моем случае работал. 

        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;
0 голосов
/ 02 февраля 2019

Похоже, что вы следовали этому руководству на среде 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 /act-native-elements / blog / 2019/01/27 / 1.0-release.html # list

List компонент был удален! List был просто обычным React Native View с некоторыми небольшими стилями полей.На самом деле не было необходимости использовать компонент ListItem.Вместо этого мы рекомендуем использовать компоненты FlatList или SectionList из React Native, которые функционируют как представления, а также отображают элементы, обновляются и т. Д.

ListItem

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

https://react -native-training.github.io / реагировать-нативные-элементы / блог / 2019/01/27/1.0-release.html#listitem

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 /act-native-elements / docs / 0.19.1 / Overview.html

Refactor

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

...