Создание горизонтальной прокрутки с динамическими данными из API

Question

У меня есть горизонтальная прокрутка с несколькими представлениями внутри, данные внутри представлений извлекаются из вызова API, поэтому я не знаю, сколько представлений у меня будет внутри представления прокрутки, есть ли лучший способреализовать это?и как я могу преобразовать это в плоский список, если это возможно?

state = { data: [] };

async componentDidMount(){
      axios.get('http://reduxblog.herokuapp.com/api/posts')
       .then((response) =>  { this.setState({ data: response.data})});
    }

<ScrollView horizontal={true} style={{width: '100%'}}>
  <View>
    <Text>
      {this.state.data.title}
    </Text>
  </View>
</ScrollView>

Answer 1

Вы правы, FlatList был бы лучшим решением для динамических данных.

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

class MyFlatList extends React.Component {

  constructor(props) {
    super(props);
    this.state = { data:[] };
  }

  async componentDidMount(){
    axios.get('http://reduxblog.herokuapp.com/api/posts')
     .then((response) =>  { this.setState({ data: response.data})});
  }

  _keyExtractor (item, index) {
    return index.toString();
  }

   _renderItem ({ item, index }) {
    return (<Text>{item.title} - {item.categories}</Text>);
  }

  render() {
    return(
     <FlatList style={{ flex: 1 }}
        data={this.state.data}
        keyExtractor={this._keyExtractor.bind(this)}
        renderItem={this._renderItem.bind(this)}
        horizontal={true}
      />
    );
  }
}

Как вы видите, FlatList требует, чтобы ему было передано несколько реквизитов.Три из них всегда обязательны: keyExtractor, renderItem и data

Сначала keyExtractor

Используется для извлечения уникального ключа для данного элемента по указанному индексу.Ключ используется для кэширования и в качестве ключа реакции для отслеживания переупорядочения элементов

Второй renderItem.Текущий renderItem возвращает очень простой компонент, с небольшим количеством времени и стилем, который можно создать.

Берет элемент из данных и выводит его в список.

Данные должны быть переданы в FlatList через реквизит данных.Вы храните свои данные в состоянии компонентов, поэтому мы можем передать их как this.state.data.FlatList будет использовать это для построения списка.

Наконец, нам нужно передать true в горизонтальную подпорку, чтобы FlatList построил горизонтальный список, а не вертикальный список.

Дополнительную информацию можно найти в документации по FlatList .Я предлагаю вам взглянуть туда и посмотреть, что вы можете придумать.

Наконец, убедитесь, что вы импортировали FlatList, View и Text из реактивной системы, в противном случае у вас будет несколько ошибок, с которыми вам придется столкнуться.Я бы также посмотрел на ваш запрос axios, поскольку вы, похоже, не обнаруживаете каких-либо ошибок, которые могут сработать.