В этой статье я объясню один из самых важных компонентов, который вы будете использовать снова и снова. Это компонент, который вы будете использовать для вывода списка элементов на устройстве. Мы будем использовать приложение, которое мы создали на шаге / статья 7 https://lnkd.in/gVJspwG, и перечислим элементы, которые мы получили от конечной точки REST.

Эта статья является частью серии (она основана на предыдущих шагах)

  1. 𝑪𝒓𝒆𝒂𝒕𝒆 𝒂 𝑹𝒆𝒅𝒖𝒙 (𝑯𝒆𝒍𝒍𝒐 𝑾𝒐𝒓𝒍𝒅): https://lnkd.in/guBuBVP

2. Создать приложение React Native здесь https://lnkd.in/gDWG7AC

3. Redux с React Native: 1-Reading State: https://lnkd.in/gUbBRs8

4. Redux с React Native: 2-обновление состояния https://lnkd.in/gPcUcMx

5. Понимание промежуточного программного обеспечения в Redux: https://lnkd.in/g5tVFn8

6. Создание макета конечной точки REST с использованием Json-Server для тестирования https://www.linkedin.com/pulse/creating-mock-rest-server-testing-using-json-server-rany/

7. Получение данных с помощью Redux-Thunk в приложении React Native: https://lnkd.in/gVJspwG

8. [Эта статья]: React Native: компонент создания элементов списка

Окончательный код для приложения можно найти в Github https://github.com/ranyelhousieny/ReactNativeFoodApplication

вы можете клонировать и следовать, используя

git clone https://github.com/ranyelhousieny/ReactNativeFoodApplication.git

================================================================

После получения данных из конечной точки REST, как описано на https://lnkd.in/gVJspwG, мы перечислим на устройстве. В предыдущей статье мы просто распечатали их на консоли, используя console.log, чтобы объяснить концепцию.

1. Сначала создайте функциональный компонент.

Как и в случае с MainComponent, давайте создадим файл в папке Components и назовем его ListItems.js.

Внутри этого файла давайте добавим основы, которые у нас будут для любого компонента.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

Боковое примечание [необязательно]: если вы используете VS Code, я предлагаю установить React Native Tools.

И фрагменты для создания функциональных компонентов с несколькими буквами

Https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -

2. Импортировать ListItems в MainComponent

Давайте импортируем ListItems в Main.js и добавим его в тело

снова запустите приложение, если оно еще не запущено (npm run web)

Переместите mapDispatch и mapState в ListItems

Поскольку мы будем извлекать элементы и отображать их в компоненте ListItems, давайте переместим этот код из основного компонента как есть, а также переместим соединение

Вот последний Main.js

А вот ListItems.js

Организуйте действия

Создайте файл с именем actions.js в Redux

Переместите создателей действий из ListItems.js в actions.js, экспортируйте функции и давайте изменим его имя на getItemsListActionCreator следующим образом:

А затем следующие изменения в ListItems.js (все изменения обведены прямоугольными

Я перешел на https://reqres.in, чтобы не использовать ключ API.

Результат будет следующим:

Использовать элемент FlatList

импортировать FlatList из react-native

import { Text, View, StyleSheet, Button, FlatList } from 'react-native';

Прежде чем мы отобразим область, полученную с сервера, позвольте мне объяснить FlatList с помощью локального массива. Давайте создадим массив объектов, назовем его людьми и поместим в компонент ListItem:

const people = [
     { name: 'Person 1' },
     { name: 'Person 2' },
     { name: 'Person 3' },
     { name: 'Person 4' },
  ];

Затем добавьте компонент FlatList перед кнопкой, как показано ниже.

<FlatList
                data={ people }
                renderItem={ ( element ) => {}}
 />

Компонент FlatList принимает два основных свойства:

  1. данные: это передать массив
  2. renderItem: это функция, которая принимает элемент и отображает каждый элемент в массиве на устройстве.

если мы выведем элемент на консоль, вы обнаружите, что это объект с другими полями внутри. Основными двумя областями, которые нас сейчас интересуют, являются:

  1. index: это индекс элемента в массиве.
  2. item: это элемент в массиве

Вот полная картина:

Поскольку мы хотим просто распечатать элемент, мы будем брать только поле элемента из элемента. Мы напечатаем имя на экран следующим образом:

Что будет отображаться на экране следующим образом:

Заключение

И вот оно! Я надеюсь, что вы нашли это полезным и чувствуете себя более уверенно, создавая списки в React Native.

Подробнее на plainenglish.io