Render two items (images) бок о бок в представлении списка в ответе родной

Question

Я пытаюсь создать что-то вроде скриншота ниже в ответном нативном. Обратите внимание, что каждая плитка является элементом продукта, извлеченным из бэкэнд.

Но я не могу сделать это с помощью ListView и его метод renderRow который отказывая мне использовать любой вид InfiniteScroll компонентов.

В настоящее время я запускаю цикл с двумя элементами за один раз и рендеринг 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> 
    ) 
} 

И затем, основываясь на указателе, я выравниваю элементы слева или справа. My View стиль выглядит, как показано ниже:

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

Реагировать Native имеет хороший пример этого в их 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 ,