Как отображать данные, поступающие из API по горизонтали в реагировать родной

Question

Пожалуйста, помогите мне. Я хочу отображать свои данные, поступающие из API, по горизонтали с помощью scrollview, но я не знаю, что я делаю неправильно. Данные отображаются по горизонтали для каждой карты.

<FlatList
  data={latestuploads}
  renderItem={({ item }) => {
    return (
      <ScrollView horizontal={true}>
        <View style={{ flexGrow: 1, flexDirection: "row" }}>
          <Card>
            <CardItem>
              <ImageBackground
                source={{ uri: item.image_url }}
                style={styles.image}
              >
                <Image
                  source={require("../assets/play-icon.png")}
                  style={styles.icon}
                />
              </ImageBackground>
            </CardItem>
            <CardItem cardBody>
              <Text style={styles.title}> {item.title} </Text>
            </CardItem>
            <CardItem cardBody>
              <Text style={styles.speaker}> {item.speaker} </Text>
            </CardItem>
          </Card>
        </View>
      </ScrollView>
    );
  }}
  keyExtractor={item => item.id}
/>

Спасибо

Answer 1

Не нужно использовать ScrollView внутри FlatList.

Установить horizontal как true в FlatList, тогда он будет отображать элементы рядом друг с другом по горизонтали, а не по вертикали.

<FlatList
  data={latestuploads}
  renderItem={({ item }) => {
    return (
      <Card>
        <CardItem>
          <ImageBackground
            source={{ uri: item.image_url }}
            style={styles.image}
          >
            <Image
              source={require("../assets/play-icon.png")}
              style={styles.icon}
            />
          </ImageBackground>
        </CardItem>
        <CardItem cardBody>
          <Text style={styles.title}> {item.title} </Text>
        </CardItem>
        <CardItem cardBody>
          <Text style={styles.speaker}> {item.speaker} </Text>
        </CardItem>
      </Card>
    );
  }}
  keyExtractor={item => item.id}
  // this will do the trick
  horizontal={true}
/>

Если вы ищете дополнительную информацию, проверьте ниже образец

import React, { Component } from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text } from 'react-native';

const DATA = [
    {
        id: 1,
        title: 'First Item',
    },
    {
        id: 2,
        title: 'Second Item',
    },
    {
        id: 3,
        title: 'Third Item',
    },
    {
        id: 4,
        title: 'Forth Item',
    },
    {
        id: 5,
        title: 'Fifth Item',
    },
    {
        id: 6,
        title: 'Sixth Item',
    },
];

export default class App extends Component {

    renderItems = ({ item }) => (
        <View style={styles.item}>
            <Text>{item.title}</Text>
        </View>
    )

    render() {
        return (
            <SafeAreaView style={styles.container}>
                <FlatList
                    data={DATA}
                    renderItem={this.renderItems}
                    keyExtractor={item => item.id}
                    horizontal
                />
            </SafeAreaView>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 20,
    },
    item: {
        height: 100,
        backgroundColor: 'green',
        padding: 20,
        marginVertical: 8,
        marginHorizontal: 16,
    },
});

Надеюсь, это поможет вам. Не стесняйтесь сомнений.