在 React Native 中显示列表答案

【问题标题】：Displaying a list in React Native在 React Native 中显示列表
【发布时间】：2017-10-02 10:12:55
【问题描述】：

我有以下列表组件：

import ListItem from './ListItem';
import React from 'react';
import { ListView, FlatList } from 'react-native';

export default class List extends React.Component {
    render() {
        var sampleList = {"1": "A", "2": "B", "3": "C"};

        return ( <ListView data={sampleList} renderRow={
            ({item}) => <ListItem element={item}/>
          }
        />);
    }
}

ListItem 在哪里：

import React from 'react';

export default class ListItem extends React.Component {
    render() {
        return (
            <Text>{this.props.element.value}</Text>
        );
    }
}

为此，在我得到的模拟器上：

undefined is not an object(evaluating 'dataSource.rowIdentities')

知道这个列表有什么问题吗？

【问题讨论】：

查看the ListView docs，我确实看到它已被弃用，我不看到它接受data属性。 . 此外，我希望如果它这样做，它会期望一个数组或其他可迭代而不是不可迭代的对象。

标签： javascript react-native jsx

【解决方案1】：

ListView 组件需要一个数组作为dataSource 属性，因此ListView 的初始数据不正确。另一件事是ListView 组件是deprecated。您应该使用FlatList 或SectionList 组件。您可以使用如下所示的内容。

render() {
  var sampleList = [
    {item: "A"},
    {item: "B"},
    {item: "C"}
  ];
   return ( <FlatList data={sampleList} renderItem={
            ({item}) => <ListItem element={item}/>
          }
        />);
    }

在您的 ListItem 组件中，您可以读取如下所示的值

import React from 'react';

export default class ListItem extends React.Component {
    render() {
        return (
            <Text>{this.props.element}</Text>
        );
    }
}

【讨论】：

谢谢。我想将 JavaScript 字典作为参数传递。知道我该怎么做吗？
您可以使用Object.keys(..) 修改您的字典并创建一个新数组作为列表的数据。
@octavian 另一个我认为我现在应该注意到的是 ListView 需要一个数据源而不是一个数据道具。你真的应该考虑使用 FlatList。我更新了我的答案
嗨@bennygenel，我尝试使用FlatList，但renderItem() 每次都会渲染数组中的每个对象，你能看一下吗？：stackoverflow.com/questions/51365912/… 谢谢