react-native - 如何将一个组件左对齐，另一个组件右对齐(页面末尾) react 原生？

Question

我正在 React Native 中制作一个应用程序，我想将一个圆圈与页面的末尾对齐。

我想做这个:



但它目前是这样的，并且只保持这样:



完整 View :

[

我已经尝试过 alignSelf、justifyContent 和其他，但它不起作用。
我测试了这个:How to align 2 react native elements, 1 being in the center and 1 on the beginning

但它不会工作。

我的代码:

const ListProductsHeader = () => (
<View>
    <View style={style.containerInfo}>
        <View style={style.circle} />
        <View>
            <Text style={style.unityName}>SUPERMERCADO MACCARTNEY</Text>
            <Text style={style.subInfo}>Categoria: Mercado</Text>
            <Text style={style.subInfo}>Pedido Nº: 1245</Text>
        </View>
    </View>
    <View style={style.containerProducts}>
        <Text style={style.productName}>1x 42 - Coca Cola 2L</Text>
        <View style={style.minus}></View>
    </View>


</View>
);

CSS:

containerProducts:{
paddingTop: 40,
paddingLeft: 15,
flexDirection: 'row',
 },
productName: {
  alignSelf: 'flex-start',
},
minus:{
  width: 20,
  height: 20,
  borderRadius: 20/2,
  backgroundColor: 'red',
},
containerInfo:{
  paddingTop:15,
  flexDirection:'row',
  paddingLeft: 15,
},
unityName:{
  fontWeight: 'bold',
  paddingLeft: 15,
},
subInfo:{
  color: 'gray',
  paddingLeft: 15,
},
circle: {
  width: 50,
  height: 50,
  borderRadius: 50/2,
  backgroundColor: 'red',
  justifyContent: 'flex-end',
},

Answer 1

Lkke 建议可以帮助您解决此问题的一件事
你需要做的是。除了主 View css 之外，一切都是正确的

<View style={flexDirection:'row',justifyContent : 'space-between'}>
 <View style={style.circle} />
    <View>
        <Text style={style.unityName}>SUPERMERCADO MACCARTNEY</Text>
        <Text style={style.subInfo}>Categoria: Mercado</Text>
        <Text style={style.subInfo}>Pedido Nº: 1245</Text>
    </View>
 </View>
 <View style={style.containerProducts}>
    <Text style={style.productName}>1x 42 - Coca Cola 2L</Text>
 <View style={style.minus}></View>
</View>

试试这可能是它可以帮助你

containerProducts: {
paddingTop: 40,
paddingLeft: 15,
flexDirection: 'row',
justifyContent: 'space-between',
},