一、在React Native flexbox 中 有
flex :1 其子元素 有相同的长度
justifyContent竖直布局
alignItems水平布局
flexDirction row(横向) colum(纵向) 整体 方向
justifyContent(子元素与子元素之间的关系) 上 下 中 flex-start center flex-end space-around space-between 子
alignItems 决定你控件的位于屏幕的竖向 左右中 位置 flex-start(左或上) center flex-end(右或下) stretch
class Item extends Component { render() { return ( <View style={{width: '33%'}}> <Image source={require('./8.jpg')} style={{alignSelf:'center',height:100,justifyContent: 'center'}}> <Text style={{fontSize:20,color:'red',opacity:1.0,textAlign:'center'}}>王猛</Text> </Image> </View> ) } } class MyImage extends Component { render() { return ( <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'flex-end', }}> <Item /> <Item /> <Item /> </View> ) } }