在React Native中显示列表

时间:2017-10-02 10:12:56

标签: javascript react-native jsx

我有以下列表组件:

${UUID()}

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>
        );
    }
}

知道这个清单有什么问题吗?

1 个答案:

答案 0 :(得分:0)

ListView组件需要将数组作为dataSource道具,因此ListView的初始数据不正确。另一件事是ListView组件是deprecated。您应该使用FlatListSectionList个组件。你可以使用下面的东西。

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>
        );
    }
}