反应原生两张卡将如何连续对齐（从服务器动态获取数据到卡时）答案

【问题标题】：react native how will two cards align in a row (when dynamically fetching data from server to card)反应原生两张卡将如何连续对齐（从服务器动态获取数据到卡时）
【发布时间】：2018-08-14 11:28:33
【问题描述】：

从服务器映射数据的代码：

{
  this.state.items.map((item, key) => (

    <View style= { styles.row } >    
    <View style={ [styles.inputWrap, styles.inputWrap2]} >
    <TouchableOpacity onPress={ this.FunctionToOpenitempage } >
    <Card>
    <CardItem>
    <Body>
    <Image style={{ resizeMode: 'cover' }} source={{ 
      uri: ("http://suburbiya.com/assets/files/item_gallery/" + item.banner_pic)
           .replace(" ", "%20") 
       }} style = { styles.logo1 } />
      <Text style={ styles.Text2 }>
        { item.price }
        < /Text>
        < Text style = { styles.Text2 } >

          { item.name }
          < /Text>
          < /Body>
          < /CardItem></Card >
          </TouchableOpacity></View > 
    </View>          
  ))}

样式编码：

row: {
    flexDirection: "row",
    flexWrap:"wrap",

  inputWrap: {
    flex:1,
    borderColor: "#cccccc",
    borderBottomWidth: 0,
    marginBottom: 0,
    marginLeft: 2,
    justifyContent:"space-between",
  },
 }

【问题讨论】：

标签： reactjs alignment react-native-flexbox

【解决方案1】：

如果您想将两张卡片连续对齐，请在每个卡片样式中设置此样式：

cardstyle:{flex:1,height:50}

【讨论】：