İki öğe (resim), tepki göstergesinde bir liste görünümünde yan yana gösterme

Question

Aşağıdaki ekran görüntüsüne benzer bir şekilde yerel olarak tepki vermeye çalışıyorum. Lütfen her karonun arka uçtan getirilen bir Ürün öğesi olduğunu unutmayın.

Ama bir ListView ve beni InfiniteScroll Bileşenlerinin her türlü kullanımı reddediyor onun renderRow yöntemini kullanarak bunu yapmak mümkün değilim.

Şu anda 2 öğeli bir döngüyü aynı anda çalıştırıyorum ve kaydırma öğesinin içinde 2 öğe oluşturuyorum. Aşağıda daha iyi açıklamak için benim Kural.

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

Ve sonra dizin çubuğuna bağlı olarak öğeleri sağa veya sola hizalıyorum. Benim Görünüm tarzı aşağıda benziyor:

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

bunu yapmak için daha iyi bir yol önerin.

Şimdiden teşekkürler.

Answer 1

Geçmişte üretimde bunu iyi bir şekilde yaptık ve iyi çalıştı, kabın genişliğini almak ve kartların genişliğini genişliğin% 50'sine ayarlamak, sonra sadece Tüm tek unsurları liste görünümüne aktarın. Ayrıca, flexWrap'un wrap'u ayarladığınızdan emin olun.

Bu, tüm aygıt boyutlarında çalışır ve ek modüller veya kitaplıklar gerektirmez. Numune aşağıda kodu ve örnek here üzerinden

Kontrol:

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

Yerli onların CameraRollView.js örnekte bunun iyi bir örnek vardır tepki. Satır başına kaç öğe oluşturulmasını ayarlamanız için groupByEveryN adında bir kitaplık kullanırlar.

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

için tam bir örnek dosya burada

Bildirimi ListView.DataSource ...

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

Sizin renderRow fonksiyonu sadece öğelerin bir dizi beklemek gerekiyor başlatmak nasıl değişiklik ...: https://github.com/facebook/react-native/blob/a564af853f108e071e941ac08be4cde864f5bfae/Examples/UIExplorer/js/CameraRollView.js .