我有以下列表组件:
${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>
);
}
}
知道这个清单有什么问题吗?
答案 0 :(得分:0)
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>
);
}
}