Question

用于映射服务器数据的代码：

{
  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",
  },
 }

its showing only one card in a row

Answer 1

如果要连续对齐两张卡片，请在每种卡片样式中设置此样式：

cardstyle:{flex:1,height:50}

对本机做出反应，两张卡将如何连续对齐（当从服务器到卡动态获取数据时）

1 个答案: