如何将一个组件对齐到左侧和其他到右侧（页面结尾）的反应本地？

我在React Native中制作了一个应用程序，我想将一个圆圈与页面的末端对齐。如何将一个组件对齐到左侧和其他到右侧（页面结尾）的反应本地？

我想使这个：

但它目前这样，只有保持这样：

完整的视图：

[ The complete 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', 
},

来源

2017-08-10 Varley Silva

' <文本样式= {} style.unityName> SUPERMERCADO MACCARTNEY <文本样式= {style.subInfo}>分类：梅尔卡 <文本样式= {style.subInfo}> PedidoNº：1245 ' 顺便说一句，其中应这些项目来，我不能在图像中看到他们 –

我会把问题中的所有屏幕。 –

是否将'justifyContent：'space-between'，'加到'containerProducts'中修正了它？ –

Lkke表明一两件事，可以帮你解决这个问题你需要做的是什么。寄托都，除了主视图中的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', 
},

来源

2017-08-10 16:54:28

不起作用，仍然像旧的一样。 –

ok好好保持让我试试其他方式，等待 –

行！非常感谢！ –

如何将一个组件对齐到左侧和其他到右侧（页面结尾）的反应本地？

回答

相关问题