2016-05-13 13 views
5

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

Product tiles

しかし、私は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', 
}, 

してください。

ありがとうございます。

答えて

9

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

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

のサンプル以下のコードと例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 
} 
+0

ありがとう、私は今これを使用しています。それは方法の方が簡単です:) –

7

は、ネイティブが自分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

+0

ありがとう、この確かに動作します! –

+0

@BradBumbalough誰かがこのサンプルをエミュレータで動作させることができましたか?私は実質的に空白の画面(トグル要素、 'Big Images、Group Type + ...')を見ていますが、画像(および他のコンテンツ)はどこから来たのですか? 'CameraRollExample.js'、 CameraRollView.js'と 'AssetScaledImageExample.js'? – zipzit

+0

@zipzit、yes私はこの例を前に使っていましたが、あなたのデバイスのCameraRollストレージから画像が来ていますので、オプションを正しく取得する必要があります(CameralRollExampleがCameraRollViewをどのように呼び出すか参照)。ありがとう! –

関連する問題