React Native flexbox的justifyContent、alignItems靈活應用

一、在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>        )    }}