Реагировать на естественное инвариантное нарушение - PullRequest
Новая
       4

Реагировать на естественное инвариантное нарушение

2 голосов
/ 22 марта 2019

Я следовал руководству по использованию FlatLists.Я скопировал код из этого репозитория GitHub: https://github.com/ReactNativeSchool/react-native-flatlist-demo/blob/master/FlatListDemo.js

Однако у меня возникает проблема ... 

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s, undefined,  You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Вот мой код: 

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

class SettingsScreen 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 SettingsScreen;

Просматривая источники в Интернете, я вижу, что, вероятно, мой импорт нарушает код, но я сам не вижу этого.Есть предложения?

Спасибо

...