在React Native中顯示列表

Question

我有以下列表組件：

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')

知道此列表有什么問題嗎？

Answer 1

ListView組件需要一個數組作為dataSource屬性，因此ListView初始數據不正確。 另一件事是ListView組件已棄用 。 您應該使用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>
        );
    }
}