如何在 React Native 中将数组作为数据转换为 FlatList？

Question

我是一个 React Native 初学者，正在努力将数组作为 FlatList 组件中的数据。 这是我试图输出的列表

我得到的结果是屏幕显示除 FlatList 之外的所有内容，这是我的应用程序中最重要的部分

这是TripsListScreen ：

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

import PlaceItem from '../components/PlaceItem';
import Place from '../models/place';

const TripsListScreen = props => {
    // I wonder if this declaration is proper ???
    const places = new Place(
        arrayOf_desName,
        arrayOf_desAddress
    )

    const eventNamePassed = props.navigation.getParam('final_eventName');
    const startDatePassed = props.navigation.getParam('final_startDate');
    const endDatePassed = props.navigation.getParam('final_endDate');
    const arrayOf_desName = props.navigation.getParam('final_desName');
    const arrayOf_desAddress = props.navigation.getParam('final_desAddress');

    return(
        <View style={styles.container}>
            <Text> This is your trip. Enjoy!</Text>
            <Text>Event Name: {eventNamePassed}</Text>
            <Text>Stating day: {startDatePassed}</Text>
            <Text>Ending day: {endDatePassed}</Text>
            <FlatList
                data={places}
                keyExtractor={(item) => item.id}
                renderItem={(itemData) => {
                    return(
                        <PlaceItem
                            name={itemData.item.name}
                            address={itemData.item.address}
                        />
                    )
                }}
            />
        </View>
    )
}

export default TripsListScreen;

地方.js 。 我的模型文件中的一个类，它描述了一个项目在我想要输出的列表中的样子

export default class Place {
    constructor(name, address){
        this.name = name;
        this.address = address
    }
}

注意：

• arrayOf_desName是一个一维数组，包含我从 API 获得的所有名称（typeOf 字符串）
• arrayOf_desAddress也是一个一维数组，包含我从 API 获得的所有地址（typeOf 字符串）

感谢您的帮助！

Answer 1

您不需要 Place 类，因为数组长度相同，将它们合并到对象数组中并将数组传递给 Flatlsit。

// create array of objects in this format [{name: '', address: '', id: 34}]
const places = arrayOf_desName.map((name, index) => ({
  name: name,
  address: arrayOf_desAddress[index],
  id: index
}));


const TripsListScreen = props => {

  const eventNamePassed = props.navigation.getParam('final_eventName');
  const startDatePassed = props.navigation.getParam('final_startDate');
  const endDatePassed = props.navigation.getParam('final_endDate');
  const arrayOf_desName = props.navigation.getParam('final_desName');
  const arrayOf_desAddress = props.navigation.getParam('final_desAddress');

  const places = arrayOf_desName.map((name, index) => ({
    name: name,
    address: arrayOf_desAddress[index],
  }));

  return (
    <View style={styles.container}>
      <Text> This is your trip. Enjoy!</Text>
      <Text>Event Name: {eventNamePassed}</Text>
      <Text>Stating day: {startDatePassed}</Text>
      <Text>Ending day: {endDatePassed}</Text>
      <FlatList
        data={places}
        keyExtractor={item => item.id}
        renderItem={itemData => {
          return (
            <PlaceItem
              name={itemData.item.name}
              address={itemData.item.address}
            />
          );
        }}
      />
    </View>
  );
};