スルーリストビュー画像の画像と名前を表示

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