Question

我有一个创建的数据。我想显示标题和里面的所有数据。但是输出仅显示标题为“ 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>
  );
}

}

class ClusterListItem extends Component {
render() {
  return          
      <View style={ styles.container }>
        <Text style={ styles.artistName }>{ this.props.cluster.title }</Text>
        <Text style={ styles.artistSongs }>{ this.props.cluster.data.name }</Text>
      </View>
  );
}
}

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

Answer 1

使用react-native FlatList来同时显示标题和数据

https://facebook.github.io/react-native/docs/flatlist.html

标题支持也适用于您的标题

Answer 2

很简单，这是您的数据：

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

这是您的链接：https://facebook.github.io/react-native/blog/2017/03/13/better-list-views.html

反应本机显示ListView

2 个答案: