在列表視圖中呈現兩個項目（圖像）在原生反應

我試圖在反應原生設計類似下面的截圖。請注意，每個tile是從後端獲取的Product元素。在列表視圖中呈現兩個項目（圖像）在原生反應

但我無法做到這一點使用一個ListView及其renderRow方法，否認我使用任何一種InfiniteScroll組件。

目前，我正在運行一個包含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> 
    ) 
}

然後基於索引prop，我將元素左對齊或右對齊。我查看風格看起來象下面這樣：

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

請提出一個更好的方式來做到這一點。

在此先感謝。

來源

2016-05-13 Karan Gujral

過去我們在生產過程中完成這項工作的一個好方法就是獲得容器的寬度並將卡的寬度設置爲寬度的50％，然後您可以將所有單個元素推入列表視圖。此外，請務必設置wrap的flexWrap。

這將適用於所有設備尺寸，並且不需要額外的模塊或庫。

看看下面的示例代碼和示例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 
}

來源

2016-05-13 14:12:56

謝謝我現在使用這個。這是更簡單:) –

陣營本地人，他的這個在他們CameraRollView.js例如一個很好的例子。他們使用名爲groupByEveryN的庫來允許您設置每行渲染多少項目。

通知的變化，你如何啓動ListView.DataSource ...

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

你renderRow功能只需要期待的項目的數組...

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

完整的示例文件位置：https://github.com/facebook/react-native/blob/a564af853f108e071e941ac08be4cde864f5bfae/Examples/UIExplorer/js/CameraRollView.js 。

來源

2016-05-13 16:25:13

感謝哥們這肯定有效！ –

@BradBumbalough有沒有人能夠讓這個例子在模擬器上工作？我看到一個空白的屏幕（一個切換元素，「大圖像，組類型+ ...」，圖像（和其他內容）來自哪裏？是否有使用'CameraRollExample.js'的引用，'' CameraRollView.js'和'AssetScaledImageExample.js'？ – zipzit

@zipzit，是的，我之前使用過這個例子，這些圖像來自你設備的CameraRoll存儲，你必須正確地得到選項（看看CameralRollExample如何調用CameraRollView）。開放一個新的問題，因爲這不是關於CameraRoll。謝謝！ –

在列表視圖中呈現兩個項目（圖像）在原生反應

回答

相關問題