如何将数组作为数据转换为 React Native 中的 FlatList？答案

【问题标题】：How to transform arrays as data to a FlatList in React Native?如何将数组作为数据转换为 React Native 中的 FlatList？
【发布时间】：2020-03-01 15:22:36
【问题描述】：

我是一名 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;

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

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

注意：

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

感谢您的所有帮助！

【问题讨论】：

你从 api 得到两个数组？
在 MapScreen 中，我有 2 个静态数组。当我调用返回 JSON 的 API 时，我对它们进行了 setState。一个用于名称，一个用于 formatted_address
在TripsListScreen中将数组作为prop传递
是的，我已经对那些const ... = props.navigation.getParam('')这样做了
@JuniusL。如果您能更具体一些，我将不胜感激。

标签： javascript reactjs react-native

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

【讨论】：