每行显示 2 条记录

Question

我想映射一个数组，它可能包含偶数或奇数个元素，我想在我的 react native 组件中每行显示 2 条记录，<Viewstyle={{flexDirection: 'row',height: 180,width: '83.33%', alignSelf: 'center', justifyContent: 'center'}}></View> 请问如何通过 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}                           
      />            );

以下是我希望如何呈现数据，每行 2 条记录，我阅读了数组缩减文档，但我怀疑它是否适用于这种情况

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

Answer 1

您可以将numColumns 属性设置为2 或FlatList，以每行显示2 列。看看document。另请注意，您应该设置horizontal={false}

希望这会有所帮助！

Answer 2

你需要在flatlist中定义numColumns，像这样

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