React native 反应本机显示列表视图

我有一个我创建的数据。我想显示标题和里面的所有数据。但输出仅显示标题，即“Cluster1”。我如何也以“名称”显示数据

这是我的数据

const ClusterData = 
[
{ title: 'Cluster1', 
  data: 
[
  {name: 'passionate'},
  {name: 'rousing'},
  {name: 'confident'},
  {name: 'boisterous'},
  {name: 'rowdy'}
],

这是我的ListView类

export default class Cluster1 extends Component {
constructor(props){
  super(props);
  let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  this.state = {
    dataSource: ds.cloneWithRows( ClusterData ),
  }
}

render() {
  return (
    <View style={styles.container}>

      <ListView
        dataSource={this.state.dataSource}
        renderRow={ ( cluster ) => <ClusterListItem cluster={ cluster } /> }/>
    </View>
  );
}

导出默认类Cluster1扩展组件{
建造师（道具）{
超级（道具）；
让ds=newListView.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）；
此.state={
数据源：ds.cloneWithRows（ClusterData），
}
}
render（）{
返回(
}/>
);
}

}

类ClusterListItem扩展组件{
render（）{
返回
{this.props.cluster.title}
{this.props.cluster.data.name}
);
}
}

---

我应该为this.props.cluster.data.name更改什么？我知道错误就在这一部分。

使用react native FlatList呈现标题和数据

---

标题支持也可用于标题

很简单，这是您的数据：

const ClusterData = [
    {
        title: 'Cluster1', data:
            [
                {name: 'passionate'},
                {name: 'rousing'},
                {name: 'confident'},
                {name: 'boisterous'},
                {name: 'rowdy'}
            ]
    },
    {
        title: 'Cluster2', data:
            [
                {name: 'passionate'},
                {name: 'rousing'},
                {name: 'confident'},
                {name: 'boisterous'},
                {name: 'rowdy'}
            ],
    },
    {
        title: 'Cluster3', data:
            [
                {name: 'Brazil'},
                {name: 'Ronaldo'},
                {name: 'confident'},
                {name: 'boisterous'},
                {name: 'rowdy'}
            ],
    }
];

这是代码：

class ClusterListItem extends Component {
    render() {
        let item = this.props.item;
        let name = item.name;

        return (
            <View style={{
                flex: 1,
                backgroundColor: "white"
            }}>
                <Text style={{
                    color: "blue",
                    fontSize: 16,
                    marginTop: 8,
                    marginBottom: 8
                }}>{name}</Text>

                <View style={{
                    backgroundColor: 'grey',
                    height: 1/2,
                }}/>
            </View>
        );
    }
}


export default class TestLibraries extends Component {
    constructor(props) {
        super(props);
        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        self = this;

        this.state = {
            dataSource: ds.cloneWithRows(ClusterData)
        }
    }

    render() {
        return (
            <View style={{
                flex: 1,
                backgroundColor: 'white'
            }}>
                <SectionList
                    renderItem={({item, index, section}) =>
                        <ClusterListItem
                        item={item}
                        index={index}
                        section={section}
                        />
                    }
                    renderSectionHeader={({section: {title}}) => (
                        <Text style={{fontWeight: 'bold', color: 'red', fontSize: 18}}>{title}</Text>
                    )}
                    sections={ClusterData}
                    keyExtractor={(item, index) => item + index}
                />

            </View>
        );
    }
}

类ClusterListItem扩展组件{
render（）{
让item=this.props.item；
让name=item.name；
返回(
{name}
);
}
}
导出默认类TestLibraries扩展组件{
建造师（道具）{
超级（道具）；
让ds=newListView.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）；
self=这个；
此.state={
数据源：ds.cloneWithRows（ClusterData）
}
}
render（）{
返回(
}
renderSectionHeader={（{section:{title}}}）=>(
{title}
)}
节={ClusterData}
keyExtractor={（项，索引）=>item+index}
/>
);
}
}

---

这是给你的链接：

我不明白你是什么意思？编辑激情、激情等风格的字体和颜色。是的，当然，检查我刚刚编辑的代码，实际上你以前已经做过了。

class ClusterListItem extends Component {
    render() {
        let item = this.props.item;
        let name = item.name;

        return (
            <View style={{
                flex: 1,
                backgroundColor: "white"
            }}>
                <Text style={{
                    color: "blue",
                    fontSize: 16,
                    marginTop: 8,
                    marginBottom: 8
                }}>{name}</Text>

                <View style={{
                    backgroundColor: 'grey',
                    height: 1/2,
                }}/>
            </View>
        );
    }
}


export default class TestLibraries extends Component {
    constructor(props) {
        super(props);
        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        self = this;

        this.state = {
            dataSource: ds.cloneWithRows(ClusterData)
        }
    }

    render() {
        return (
            <View style={{
                flex: 1,
                backgroundColor: 'white'
            }}>
                <SectionList
                    renderItem={({item, index, section}) =>
                        <ClusterListItem
                        item={item}
                        index={index}
                        section={section}
                        />
                    }
                    renderSectionHeader={({section: {title}}) => (
                        <Text style={{fontWeight: 'bold', color: 'red', fontSize: 18}}>{title}</Text>
                    )}
                    sections={ClusterData}
                    keyExtractor={(item, index) => item + index}
                />

            </View>
        );
    }
}