React Native FlexLayout：右对齐项目

Question

我有一个产品列表，想在信息框的右端显示文本 "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}€</Text>
            </View>
            <View>
                <Text>ITEMUNIT</Text>
            </View>
        </View>
    </View>
</View>
</TouchableOpacity>;

Answer 1

我为您制作了一个小演示。请在这里检查： https://snack.expo.io/@tarikfojnica/layout（点击右边的Tap To Play）

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

<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}}>.9</Text>
          <Text>.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：我会避免编写内联样式。

React Native FlexLayout：右对齐项目

React Native FlexLayout: Alignment item right

flexbox

reactjs

react-native

react-native-flexbox