0

我有一个产品列表,想在信息框的右端显示文本“ITEM UNIT”。但是,它会受到其上方文本位置的影响。

我该如何解决这个问题并将“ITEM UNIT”放在显示器的右端?

在此处输入图像描述

<TouchableOpacity
onPress={() => this.props.onItemClicked(this.props.item)}
style={{ marginRight: 130 }}
>
<View style={styles.itemContent}>
    <View>
        <FadeIn>
            <Image
                resizeMode="contain"
                style={{
                    height: 100,
                    width: 100,
                    marginTop: 10,
                    marginLeft: 10
                }}
                source={{ uri: url }}
            />
        </FadeIn>
    </View>
    <View style={{ justifyContent: "space-around" }}>
        <Text style={{ fontSize: 16, fontFamily: "System" }}>
            {articleName}
        </Text>
        <View
            style={{
                flexDirection: "row",
                justifyContent: "space-between"
            }}
        >
            <View style={{ flexDirection: "row" }}>
                <Text style={styles.itemPrice}>{originalprice} </Text>
                <Text style={styles.itemPriceReduced}>{specialprice}€&lt;/Text>
            </View>
            <View>
                <Text>ITEMUNIT</Text>
            </View>
        </View>
    </View>
</View>
</TouchableOpacity>;
4

1 回答 1

1

我为您制作了一个小演示。请在此处查看: https ://snack.expo.io/@tarikfojnica/layout (点击右侧点击播放)

以下是您应该检查的代码部分:

<TouchableOpacity style={styles.container} onPress={() => this.props.onItemClicked(this.props.item)}>
  <View style={styles.itemContent}>
    <View style={styles.iconContainer}>
      <Image source={Icon} style={styles.icon} />
    </View>
    <View style={styles.textContainer}>
      <Text>This is the title </Text>

      <View style={styles.downText}>
        <View style={styles.priceText}>
          <Text style={{marginRight: 10}}>$99.9</Text>
          <Text>$99.9</Text>
        </View>

        <View style={styles.label}>
          <Text>Label</Text>
        </View>
      </View>
    </View>
  </View>
</TouchableOpacity>

const styles = StyleSheet.create({
  container: {
    marginTop: 24,
  },

  itemContent:  {
     flexDirection: 'row',
     borderBottomWidth: 1,
     borderColor: 'e5e5e5'
  },

  iconContainer: {
    padding: 10,
    flex: 1,
  },

  icon: {
    width: 40,
    heigth: 40
  },

  textContainer: {
    backgroundColor: 'whitesmoke',
    flex: 7,
    padding: 5
  },

  downText: {
    marginTop: 10,
    flexDirection: 'row',
    justifyContent: 'space-between'
  },

  priceText: {
    flexDirection: 'row',
  },

  label: {
    textAlign: 'right',
    backgroundColor: 'yellow',
    padding: 3
  }
});

作为参考,它的外观如下:

在此处输入图像描述

PS:我会避免编写内联样式。

于 2018-04-05T18:19:29.837 回答