如何在 React Native 中水平显示来自 API 的数据

Question

请帮帮我。我想通过滚动视图水平显示来自 API 的数据，但我不知道我做错了什么。每张卡片的数据都是水平显示的。

<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

不必在 FlatList 中使用 ScrollView。

在 FlatList 中将 horizontal 设置为 true，然后它将水平而不是垂直呈现项目。

<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,
    },
});

希望对您有所帮助。有疑问欢迎留言。

如何在 React Native 中水平显示来自 API 的数据

How to display data coming from an API horizontally in react native

reactjs

react-native

horizontalscrollview

react-native-image