Question

我想使用listView显示多个图像。我通过listview尝试了很多次，但是只显示了show only。

这是代码

class MyComponent extends Component {
  constructor() {
    super();
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(['./flag/f1.jpg', 'England']),
    };
  }

这是问题：我有5个标志图片，我想给5个pic源，但在这里我只有一个数据源。谁能告诉我如何给出多重图像来源？

  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}

        renderRow={(rowData) => <Text>{rowData}</Text>}
      />
    );
  }
}

Answer 1

您的数据源必须更加复杂，例如：

dataSource: ds.cloneWithRows([{
   image: './flag/f1.jpg',
   name: 'England'
}, {
   image: './flag/f2.jpg',
   name: 'Germany'
}])

然后你可以访问这样的数据：

<ListView
    dataSource={this.state.dataSource}
    renderRow={(rowData) => (
        <View>
            <Image source={{ uri: rowData.image }}/>
            <Text>{rowData.name}</Text>
        </View>
    )}
/>

通过列表查看显示图像和图像名称

1 个答案: