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

Question

我想使用listView显示多个图像。 我尝试了很多时间通过listview，但显示只显示文本。

下面的代码

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页标志的图片和我想给PIC的5来源，但在这里我只有一个数据源。 任何人都可以告诉我如何给图像的多个来源？

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