码迷,mamicode.com
首页 > 其他好文 > 详细

ReactNative学习笔记1 Flexbox布局

时间:2016-03-28 16:49:03      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:

一、比例属性flex和布局方向属性flexDirection

例如三个视图的flex属性值分别为2、4、8,则它们的高度比例为2:4:8。,宽度不指定,默认为全屏的宽度。

class ZLFReactNativeDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.style1}></View>
        <View style={styles.style2}></View>
        <View style={styles.style3}></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
   flexDirection: column, backgroundColor:
‘#00FFFF‘, }, style1: { flex: 2, backgroundColor: ‘red‘, }, style2: { flex: 4, backgroundColor: ‘blue‘, }, style3: { flex: 8, backgroundColor: ‘green‘, }, });

技术分享   技术分享

如果要改为横向布局,则只需改父视图的属性flexDirection为row

二、对齐方式属性alignSelf

alignSelf主要有flex-start(对于纵向布局来说是居上,对于横向布局是居左)、 flex-end(对于纵向布局来说是居下,对于横向布局是居右)、 center(居中)、  auto(自由)、 stretch(铺满)几种对齐方式。

三、justifyContent和alignItems

alignItems是水平居中,justifyContent是垂直居中,这两者跟其他属性不同的是,它们是约束子视图的。

 



ReactNative学习笔记1 Flexbox布局

标签:

原文地址:http://www.cnblogs.com/zhanglinfeng/p/5329450.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!