Reactjs React Native FlexLayout:路线项目右侧

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

如何解决此问题并将“项目单位”放在显示屏的右端

this.props.onItemClicked（this.props.item）}
style={{marginRight:130}
>
{articleName}
{原始价格}
{特殊价格}€
项目单位
;

我为您准备了一个小演示。请在这里查看： （单击“点击”在右侧播放）

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

<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
  }
});

this.props.onItemClicked（this.props.item）}>
这是标题
$99.9
$99.9
标签
const styles=StyleSheet.create({
容器：{
玛金托普：24，
},
项目内容：{
flexDirection:'行'，
边界宽度：1，
边框颜色：“E5”
},
iconContainer：{
填充：10，
弹性：1，
},
图标：{
宽度：40，
身高：40
},
文本容器：{
背景颜色：“白烟”，
弹性：7，
填充：5
},
下文：{
玛金托普：10，
flexDirection:'行'，
justifyContent:“间距”
},
价格文本：{
flexDirection:'行'，
},
标签：{
textAlign:'右'，
背景颜色：“黄色”，
填充：3
}
});

作为参考，以下是它的外观：

---

PS：我会避免写内联样式。

嘿，塔里克。非常感谢你的回答。你的代码实际上比我的代码好。只有一件事。如果图标比示例中的图标高得多，则价格文本不会与底部对齐。有没有办法将此存档？请再次检查。为了满足您的新需求，我做了一些更改：代码：截图：Phantastic我的英雄！你救了我一天。

<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
  }
});