ReactNative/Flex: 如何水平排列两个组件？

Question

如何使用 flex 在同一行中将 2 个图像组件并排排列？

像这样：

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

Answer 1

flexDirection: 'row'是你的朋友

Answer 2

我觉得是这样的...

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

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

Answer 3

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

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