如何反应原生listView以显示编号？

Question

我想使用listView显示包含编号（将来自API）的以下内容，但API没有编号：

1. 约翰
2. 彼得
3. 玛丽
4. 月
5. 查理

constructor(props) {
    super(props);
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows([
        {name: "John"},
        {name: "Peter"},
        {name: "Mary"},
        {name: "May"},
        {name: "Charlie"}
      ])
    };   }

render() {
    return (
       <View>
          <ListView
            dataSource={this.state.dataSource}
            renderRow={(rowData, sectionID, rowID) => <Text>{rowData.name}</Text>}
            />
        </View>    );   }

我只能显示没有编号的项目。谁能帮我？谢谢！

Answer 1

您可以使用rowID获取项目的当前索引，并从那里开始增加：

renderRow (rowData, sectionID, rowID) {
  rowID++
  return <Text>{rowID}. {rowData.name}</Text>
}

我已经设置了一个工作示例here。

https://rnplay.org/apps/hxlAqw