Question

我有以下列表组件：

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

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

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

在React Native中显示列表

1 个答案: