React Native flexbox的justifyContent、alignItems靈活應用
阿新 • • 發佈:2019-02-19
一、在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 extendsComponent { 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> ) } }