React Nativeの行内に3つのイメージを配置する

Question

React Nativeプロジェクトに取り掛かり始めたばかりです。私は、APIから画像の一覧を表示する必要があります。 APIは次のように使用できる画像URLのみを提供します：

<Image 
     style={{width: 50, height: 50}} 
     source={{uri: 'https://avatars0.githubusercontent.com/u/13102253?s=460&v=4'}} 
/> 

画像の数は動的ですが、1行に3画像しか表示しません。どうすればこれを達成できますか？

Answer 1

あなたが必要とする正確に何であるあなたが行

<ListView 
    contentContainerStyle={styles.list} 
    dataSource={this.props.yourData} //datasource either props/state only 
    pageSize={3} 
    renderRow={(data, rowID, sectionID) => (
<Image 
    style={{width: 50, height: 50}} 
    source={{uri: data.path}}/>)} //path here is url that you receive 

const styles = StyleSheet.create({ 
list: { 
flexDirection: "row", 
flexWrap: "wrap" 
}}) 

Answer 2

リアクト - ネイティブFlatListに並べるの世話をします。この とページサイズのような行にそれをラップすることにより、それをスタイルすることができListViewを使用することができます。それはあなたの場合には（私はここyourImagesArrayと呼ばれる）のデータ配列の各反復がdata小道具として（私はここと呼ばれる）のRenderItemに渡される3.

<FlatList 
    numColumns={3} 
    data={yourImagesArray} 
    renderItem={<YourImageComponent >} 
/> 

あるべきnumColumns小道具を受け入れます。したがって、のレンダリング機能は、次のようになります。

render() { 
    const { data } = this.props; 

    return (
    <Image source={{ uri: data.uri }} style={{ width: 50, height: 50 }} /> 
); 
}