如何在本机反应中水平显示来自API的数据答案

【问题标题】：How to display data coming from an API horizontally in react native如何在本机反应中水平显示来自API的数据
【发布时间】：2020-03-11 16:50:28
【问题描述】：

请帮帮我。我想通过滚动视图水平显示来自 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}
/>

谢谢

【问题讨论】：

标签： reactjs react-native horizontalscrollview react-native-image

【解决方案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,
    },
});

希望这对您有所帮助。如有疑问，请随意。

【讨论】：