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

【问题标题】：ReactNative/Flex: how to arrange two components horizontal?React Native/Flex：两个组件如何横向排列？
【发布时间】：2016-09-26 07:28:59
【问题描述】：

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

像这样：

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

【问题讨论】：

标签： reactjs react-native react-jsx jsx

【解决方案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'
    }
});

【讨论】：