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

debugcn 发表于 Dev

艾哈迈德·萨尔曼（Ahmed Salman）

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

谢谢

都山

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

希望这对您有所帮助。如有疑问，请放心。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。