import React, { Component } from ‘react‘; import { AppRegistry, View } from ‘react-native‘; export default class AlignItemsBasics extends Component { render() { return ( // 尝试把`alignItems`改为`flex-start`看看 // 尝试把`justifyContent`改为`flex-end`看看 // 尝试把`flexDirection`改为`row`看看 <View style={{ flex: 1, flexDirection: ‘column‘, justifyContent: ‘center‘, alignItems: ‘stretch‘, }}> <View style={{ flex: 1, flexDirection: ‘row‘, justifyContent: ‘center‘, alignItems: ‘center‘, }}> <View style={{width: 50, height: 50, backgroundColor: ‘red‘}} /> <View style={{width: 50,height: 50, backgroundColor: ‘blue‘}} /> <View style={{width: 50,height: 100, backgroundColor: ‘black‘}} /> </View> </View> ); } };
一个横向排列,一个竖向排列,子视图居中 https://reactnative.cn/docs/flexbox/
alignItems子视图对齐方式,例如:视图内容横向排列,则是标识竖向对齐方式
原文:https://www.cnblogs.com/yuxiaoyiyou/p/10253867.html