Блог

Главная - Вопросы по программированию - React Native FlatList не отображается

React Native FlatList не отображается

#javascript #reactjs #react-native #react-native-elements

#javascript #reactjs #react-native #react-native-элементы

Вопрос:

Я пытаюсь добавить список с возможностью поиска в свое приложение React Native, но столкнулся с проблемой при попытке отобразить сам список. Ошибка старая: «Вероятно, вы забыли экспортировать свой компонент из файла, в котором он определен, или, возможно, вы перепутали импорт по умолчанию и именованный импорт». Я уверен, что это может быть моей проблемой, но после прочтения нескольких вариантов проблемы в Интернете я, похоже, не могу понять, в чем проблема.

Я попытался изменить каждый используемый импорт таким образом, чтобы перечислять их один за другим, используя и удаляя скобки. Я попытался переустановить react-native-elements и проверил свои зависимости на наличие правильных версий. Также пробовал отображать список без данных.

Компонент списка: Liste.js

 import { View, Text, FlatList } from "react-native";
import  {List, ListItem }  from "react-native-elements"

class Liste extends Component {
  constructor(props) {
    super(props);

...

 render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <List>
            <FlatList
                data={this.state.data}
                renderItem={({ item }) => (
                    <ListItem
                        roundAvatar
                        title={`${item.name.first} ${item.name.last}`}
                        subtitle={item.email}
                        avatar={{ uri: item.picture.thumbnail }}
                    />
                )}
                />
        </List>
      </View>
    );
  }
}

export default Liste;

Я ожидал, что список вообще будет отображаться, но этого не происходит.

Комментарии:

1. возможно, ошибка связана с тем, что библиотека react-native-elements не содержит компонента List. Пожалуйста, смотрите компоненты, включенные в github.com/react-native-training/react-native-elements

2. можете ли вы распечатать полное сообщение об ошибке?

3. Ответ Пателса был правильным. Я ссылался на старую документацию для моего использования элементов. Раньше поддерживался список, но с тех пор он был заменен простым представлением. Изменение этого и удаление импорта сработали!

Ответ №1:

  • Во-первых, вам нужно удалить List компонент, потому что react-native-elements его не содержит.

  • Второе, что вам нужно сделать, это удалить alignItems: "center", justifyContent: "center" из View компонента.

  • Кроме того, в FlatList компоненте неверно указано свойство avatar . Вам придется выбирать между: leftAvatar и rightAvatar .

Вам, комонент, должно понравиться выглядеть так:

 <View style={{ flex: 1 }}>
    <FlatList
        data={this.state.data}
        renderItem={({ item }) => (
            <ListItem
                roundAvatar
                title={item.title}
                subtitle={item.body}
                leftAvatar={{
                    source: item.thumbnail amp;amp; { uri: item.thumbnail },
                }}
            />
        )}
    />
</View>

Вот рабочая демонстрация.