React Native: как лучше всего составить список элементов кнопки с учетом данных из запроса Fetch (Url)?

Я хочу составить список элементов кнопки, на которые может нажимать пользователь. Количество элементов кнопки будет варьироваться от 3 до 5 в зависимости от результата запроса на выборку, который я выполняю. Я знаю, как заполнить плоский список на основе результата запроса на выборку, но не содержимого кнопки. Любая помощь?

Например, используя этот JSON, предположим, что я хочу визуализировать кнопки для количества фильмов, которые там есть, каждая кнопка имеет название фильма. Количество фильмов будет разным.

Вы хотите отобразить список кнопок, и каждая кнопка должна иметь разные действия при нажатии. Это так.

— 20.08.2018 07:30

Не могли бы вы поделиться списком данных, на основе которых вы хотите отобразить кнопки.

— 20.08.2018 07:33

@MohammedAshfaq Я отредактировал свой пост, чтобы лучше отразить тип данных, которые я могу использовать для рендеринга кнопок.

— 20.08.2018 23:35

почему ты не используешь флетлист?

— 07.09.2018 15:15

react-native react-native-flatlist react-native-button

20.08.2018 03:43

Умерло ли Create-React-App?

В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.

Освоение React Native: Пошаговое руководство для начинающих

React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...

Ускоренная стилизация компонентов React Native с помощью NativeWind

В чем разница между react native и react ?

React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...

От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React

Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...

Хуки React: что это такое и как их использовать

Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...

788

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Получение

Создайте api.
Создание функции извлечения в сагах
Установить указатель (саги)
Создайте редуктор redux для получения данных из выборки
В состоянии редукции сопоставления компонентов для получения данных

Составить список

Попробуйте функцию рендеринга, используйте return ListItem
Это не загромождено

20.08.2018 04:24

Ответ принят как подходящий

Если вы установите фильмы в состояние после ответа Api, как это.

this.setState({movies: apiResponse.movies})

  

renderMovieList(){
    return  this.state.movies.map((movie, i, movieArray) =>
      <View 
        key = {movie.id} 
        style = {{ height:50, padding:20}}>
        <Button
          onPress = {()=> this.handleOnPress(movie)}
          title = {movie.title}
          color = "#841584"
          accessibilityLabel = "Learn more about this purple button"
        />
      </View>
    )
  }
  
  handleOnPress(movieDetails){
   alert(movieDetails.title);
  }

  render() {
    return (
      <View style = {{flex: 1, justifyContent:'center', backgroundColor: "#0d98ba"}}>
        {this.state.movies.length? this.renderMovieList(): null}
      </View>
    );
  }

Смотрите полный код здесь

21.08.2018 08:23