反応ネイティブのリストビューで2つのアイテム（画像）を並べて表示

Question

私は反応ネイティブの下のスクリーンショットのようなものをデザインしようとしています。 各タイルは、バックエンドから取得されたProduct要素であることに注意してください。

しかし、私はInfiniteScrollコンポーネントの任意の種類を使用するように私を否定しているListViewコントロールとそのでrenderRowメソッドを使用して、これを行うことができないんです。

現在、私は一度に2つの要素と2つの要素をスクロールビュー内でレンダリングするループを実行しています。以下は私のコードがより良く説明するためのものです。

render() { 
    var elem = []; 
    for(var i = 0; i < this.state.products.length; i+=2) { 
     var prod = this.state.products[i]; 
     var prod2 = this.state.products[i + 1]; 
     elem.push(
     <View style={styles.view} key={i} > 
      <ProductTile onPressAction={this._pdpPage} prod={prod} index={i} /> 
      <ProductTile onPressAction={this._pdpPage} prod={prod2} index={i + 1} /> 
     </View> 
    ); 
    } 
    return (
     <ScrollView> 
      {elem} 
     </ScrollView> 
    ) 
} 

インデックスのプロップに基づいて、要素を左右に揃えています。 マイビュースタイルは以下のようになります。これを行うには良い方法を提案

view: { 
    flex: 1, 
    flexDirection: 'row', 
}, 

してください。

ありがとうございます。

Answer 1

これまでの生産でこれを行ったことがあり、うまくいきました。コンテナの幅を取得し、カードの幅を幅の50％に設定することですすべての単一要素をリストビューにプッシュします。また、flexWrapをwrapに設定してください。

これはすべてのデバイスサイズで機能し、追加のモジュールやライブラリを必要としません。

のサンプル以下のコードと例hereチェックアウト：

https://rnplay.org/apps/t_6-Ag

/* Get width of window */ 
const width = Dimensions.get('window').width 

/* ListView */ 
<ListView 
    contentContainerStyle={styles.listView} 
    dataSource={this.state.dataSource} 
    renderRow={this.renderRow.bind(this)} 
/> 

/* Row */ 
renderRow() { 
    return <View style={styles.card}> 
      <Text>{rowData.name} {rowData.price}</Text> 
     </View> 

/* Styles */ 
listView: { 
    flexDirection: 'row', 
    flexWrap: 'wrap' 
}, 
card: { 
    backgroundColor: 'red', 
    width: (width/2) - 15, 
    height: 300, 
    marginLeft: 10, 
    marginTop: 10 
} 

Answer 2

は、ネイティブが自分CameraRollView.js例ではこの良い例を持って反応します。彼らはgroupByEveryNと呼ばれるライブラリを使用して、行ごとにレンダリングするアイテムの数を設定できるようにします。

// rowData is an array of images 
_renderRow: function(rowData: Array<Image>, sectionID: string, rowID: string) { 
    var images = rowData.map((image) => { 
    if (image === null) { 
     return null; 
    } 
    return this.props.renderImage(image); 
    }); 

    return (
    <View style={styles.row}> 
     {images} 
    </View> 
); 
} 

全サンプルファイルここ

お知らせあなたがListView.DataSource ...

var ds = new ListView.DataSource({rowHasChanged: this._rowHasChanged}); 
    this.state.dataSource = ds.cloneWithRows(
    groupByEveryN(this.state.assets, this.props.imagesPerRow) 
); 

あなたrenderRow機能がちょうど項目の配列を期待する必要が開始する方法に変更...：https://github.com/facebook/react-native/blob/a564af853f108e071e941ac08be4cde864f5bfae/Examples/UIExplorer/js/CameraRollView.js 。