通過列表查看顯示圖像和圖像的名稱

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