React Native/Flex：两个组件如何横向排列？

Posted 2023-02-21

【中文标题】React Native/Flex：两个组件如何横向排列？

【英文标题】：ReactNative/Flex: how to arrange two components horizontal?

【发布时间】：2016-09-26 07:28:59

【问题描述】：

如何使用 flex 将 2 个 Image-Components 并排排列在同一行中？

像这样：

|| （图1）|| （图2）||

【参考方案1】：

flexDirection: 'row'是你的朋友

【讨论】：

加个hot的例子用这个样式改进答案。

【参考方案2】：

我认为是这样的......

<View style=flexDirection:'row', alignItems:'center', justifyContent:'center'>
  <Image source... />
  <Image source... />
</View>

现在根据你想要的水平间距，你可以使用不同的justifyContent

【参考方案3】：

首先我们将 flex 方向设置为 row，这将水平排列子元素。为了使组件水平居中，我们使用 alignItems 属性，然后我们使用 justifyContent 使组件垂直居中。 试试这样：

var styles = StyleSheet.create(
    firstComponent:
        flexDirection:'row'    
    ,
    childrens:     
        width: 120,       
        color:'#fff',
        alignItems:'center'
    
);