我想映射一个可能包含偶数或奇数个元素的数组，并且我想在我的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条记录，我通读了array reduce docs，但我怀疑这种情况是否行得通
<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>
答案 0 :(得分：0)
您可以将numColumns的{{1}}属性设置为2的{{1}}，以每行显示2列。看一下document。另请注意，您应该设置FlatList
希望这会有所帮助！
答案 1 :(得分：0)
您需要在平面列表中定义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}
/>
)
}
}