Javascript 每行显示2条记录

我想通过一个数组进行映射，该数组可能包含偶数或奇数个元素，并且我想在react native组件中每行显示2条记录，

请问如何通过2条记录而不是一条记录映射数组

这就是我到目前为止所尝试的

 const goods = (
        <FlatList          
        data={this.state.goods}          
        renderItem={({ item }) => ( 
            <TouchableNativeFeedback 
            onPress={() =>
                this.props.navigation.navigate('ProductDetail', {name: item.name,
            amount: item.amount,
            description: item.description,
            images: item.images,
            qty: item.quantity,
            id: item.id}
            )}>
                    <View style={{flexDirection: 'row',height: 180,width: '83.33%',
                    alignSelf: 'center', justifyContent: 'center'}}>
                    <TouchableNativeFeedback onPress={() =>
                        this.props.navigation.navigate('ProductDetail', {})}>
                        <View style={{flex: 1, flexDirection: 'column',justifyContent: 'space-evenly'}}>
                        <View style={{height: Height*(17.19/100),
                            width: Width*(40/100),
                            marginRight: 10,
                            borderTopRightRadius: 6,
                            borderTopLeftRadius: 6,
                            borderBottomLeftRadius: 6,
                            borderBottomRightRadius: 6,
                            backgroundColor: '#FAFAFA',
                            borderWidth: 0.4,
                            borderColor: '#DADADA',
                            elevation: 0}}>
                            <Image  resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
                                    source={require('../headset.png')}/>
                        </View>
                            <View style={{flexDirection: 'column'}}>
                                <Text style={{fontFamily: 'mont-semi',fontSize: 12,color: '#615d5d',
                                    paddingLeft: 10}}>
                                    Headset
                                </Text>
                                <Text style={{fontFamily: 'mont-medium',color: '#615d5d',fontSize: 8
                                    ,paddingLeft: 10}}>
                                    ₦230,000.00
                                </Text>
                            </View>
                        </View></TouchableNativeFeedback>
                        <TouchableNativeFeedback onPress={() =>
                        this.props.navigation.navigate('ProductDetail', {})}>
                        <View style={{height:180, flexDirection: 'column', justifyContent: 'space-evenly'}}>
                            <View style={{height: Height*(17.19/100),
                                width: Width*(40/100),
                                marginRight: 10,
                                borderTopRightRadius: 6,
                                borderTopLeftRadius: 6,
                                borderBottomLeftRadius: 6,
                                borderBottomRightRadius: 6,
                                backgroundColor: '#FAFAFA',
                                borderWidth: 0.4,
                                borderColor: '#DADADA',
                                elevation: 0}}>
                                <Image  resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
                                        source={require('../case_.png')}/>
                            </View>
                            <View style={{flexDirection: 'column'}}>
                                <Text style={{fontFamily: 'mont-semi',fontSize: 12,color: '#615d5d',
                                    paddingLeft: 10}}>
                                    Headset
                                </Text>
                                <Text style={{fontFamily: 'mont-medium',color: '#615d5d',fontSize: 8
                                    ,paddingLeft: 10}}>
                                    ₦230,000.00
                                </Text>
                            </View>
                        </View></TouchableNativeFeedback>
                </View>
                    </TouchableNativeFeedback>          
         )}          
         keyExtractor={item => item.id}  
         horizontal={true}                           
      />            );

const货物=(
( 
this.props.navigation.navigate（'ProductDetail'，{name:item.name，
金额：item.amount，
description:item.description，
图片：item.images，
数量：项目数量，
id:item.id}
)}>
this.props.navigation.navigate（'ProductDetail'，{}}>
头戴式耳机
₦230,000.00
this.props.navigation.navigate（'ProductDetail'，{}}>
头戴式耳机
₦230,000.00
)}          
keyExtractor={item=>item.id}
水平={true}
/>            );

下面是我希望如何呈现数据，每行2条记录，我通读了array reduce文档，但我怀疑它是否适用于这种情况

<View style={{flex: 1,
                    flexDirection: 'column'}}>
                <View style={{flexDirection: 'row',height: 180,width: '83.33%',
                    alignSelf: 'center', justifyContent: 'center'}}>
                    <TouchableNativeFeedback onPress={() =>
                        this.props.navigation.navigate('ProductDetail', {})}>
                        <View style={{flex: 1, flexDirection: 'column',justifyContent: 'space-evenly'}}>
                        <View style={{height: Height*(17.19/100),
                            width: Width*(40/100),
                            marginRight: 10,
                            borderTopRightRadius: 6,
                            borderTopLeftRadius: 6,
                            borderBottomLeftRadius: 6,
                            borderBottomRightRadius: 6,
                            backgroundColor: '#FAFAFA',
                            borderWidth: 0.4,
                            borderColor: '#DADADA',
                            elevation: 0}}>
                            <Image  resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
                                    source={require('../headset.png')}/>
                        </View>
                            <View style={{flexDirection: 'column'}}>
                                <Text style={{fontFamily: 'mont-semi',fontSize: 12,color: '#615d5d',
                                    paddingLeft: 10}}>
                                    Headset
                                </Text>
                                <Text style={{fontFamily: 'mont-medium',color: '#615d5d',fontSize: 8
                                    ,paddingLeft: 10}}>
                                    ₦230,000.00
                                </Text>
                            </View>
                        </View></TouchableNativeFeedback>
                        <TouchableNativeFeedback onPress={() =>
                        this.props.navigation.navigate('ProductDetail', {})}>
                        <View style={{height:180, flexDirection: 'column', justifyContent: 'space-evenly'}}>
                            <View style={{height: Height*(17.19/100),
                                width: Width*(40/100),
                                marginRight: 10,
                                borderTopRightRadius: 6,
                                borderTopLeftRadius: 6,
                                borderBottomLeftRadius: 6,
                                borderBottomRightRadius: 6,
                                backgroundColor: '#FAFAFA',
                                borderWidth: 0.4,
                                borderColor: '#DADADA',
                                elevation: 0}}>
                                <Image  resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
                                        source={require('../case_.png')}/>
                            </View>
                            <View style={{flexDirection: 'column'}}>
                                <Text style={{fontFamily: 'mont-semi',fontSize: 12,color: '#615d5d',
                                    paddingLeft: 10}}>
                                    Headset
                                </Text>
                                <Text style={{fontFamily: 'mont-medium',color: '#615d5d',fontSize: 8
                                    ,paddingLeft: 10}}>
                                    ₦230,000.00
                                </Text>
                            </View>
                        </View></TouchableNativeFeedback>
                </View>
                </View>

this.props.navigation.navigate（'ProductDetail'，{}}>
头戴式耳机
₦230,000.00
this.props.navigation.navigate（'ProductDetail'，{}}>
头戴式耳机
₦230,000.00

您可以将

numColumns

属性设置为

FlatList

的

2

，以每行显示2列。请看下面的图片。还要注意，您应该设置

horizontal={false}

---

希望这会有帮助

您需要在平面列表中定义numcolumn，类似这样

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, FlatList, Image, TouchableOpacity, Dimensions, TouchableNativeFeedback } from 'react-native';

export default class Test extends Component {
constructor() {
 super();
  this.state = {
   data : [
    {uri : 'https://uploads.siteduzero.com/files/6001_7000/6410.jpg'},
    {uri : 'https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/pluto_color_mapmosaic.jpg'},
    {uri : 'https://www.w3schools.com/Css/paris.jpg'},
    {uri : 'https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/pia21975-opt.jpg'},
   ]
  }
}

_renderItem = ({item}) => {
 console.log(item.uri)
  return (
    <View style={{flexDirection:'row' ,flex:1,borderWidth:4,borderColor:'white'}}>
      <Image style={{width:Dimensions.get('window').width/2 , height:100}} resizeMode="cover" source={{uri : item.uri}} />
  </View>
  )
 }
  _keyExtractor = (item, index) => item.uri.toString();

 render() {
  return (
    <FlatList
      numColumns={2}
      data={this.state.data}
      extraData={this.state}
      keyExtractor={this._keyExtractor}
      renderItem={this._renderItem}
    />
  )
 }
}

import React，{Component}来自'React'；
从“react native”导入{平台、样式表、文本、视图、平面列表、图像、TouchableOpacity、维度、TouchableNativeFeedback}；
导出默认类测试扩展组件{
构造函数（）{
超级（）；
此.state={
数据：[
{uri:'https://uploads.siteduzero.com/files/6001_7000/6410.jpg'},
{uri:'https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/pluto_color_mapmosaic.jpg'},
{uri:'https://www.w3schools.com/Css/paris.jpg'},
{uri:'https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/pia21975-opt.jpg'},
]
}
}
_renderItem=（{item}）=>{
log（item.uri）
返回(
)
}
_keyExtractor=（项，索引）=>item.uri.toString（）；
render（）{
返回(
)
}
}

您是否尝试过将记录按数组中的2行分组，然后在分组的数组上循环？我不熟悉react native，但您能使用css网格吗？如果是这样，则可以直观地实现效果（无需首先对阵列进行分组）。