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

Question

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

像这样：

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

Answer 1

flexDirection: 'row'是你的朋友

Answer 2

我觉得这样......

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

现在，根据您希望水平间隔的方式，您可以使用不同的justifyContent

Answer 3

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;