2016-09-07 14:09:01 dongdong230 阅读数 3390
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57803 人正在学习 去看看 李宁
2017-12-20 17:35:00 qq_28978893 阅读数 3557
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57803 人正在学习 去看看 李宁

在用flex布局疯狂写界面的过程中,你可有看到了这几个属性不是到有什么区别,又或者你还没有见过这其中的某个属性而为某个布局设计绞尽脑汁,看这里

从我们最熟悉的alignItems说起吧

alignItems
alignItems和justifyContent配合使用,前者是侧轴布局,后者是主轴布局,但是主轴具体代表横轴还是纵轴取决于flexDirection的属性值

alignItems的几个属性和效果,如下图

这里写图片描述

alignContent

alignContent的布局效果和alignIems完全一致,只不过前者只对多行的item才有效果,而后者对单行、多行都有效

alignSelf

alignSelf区别于alignItems的是,前者是在item内部定义的,它的默认取值是auto,向上取父类alignItems的值,如果对alignSelf属性的值进行自定义则会覆盖父类的效果

2018-06-26 09:17:25 yxw_android 阅读数 2827
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57803 人正在学习 去看看 李宁

React-Native flex 布局使用总结

父视图属性(容器属性):

  1. flexDirection : 对子布局方向的设置

    row : 从左到右依次排列
    row-reverse :从右向左依次排列
    column:(default) 从上到下排列
    column-reverse :从下到上排列
    

  2. flexWrap: 定义子布局是否在父布局中多行排列

    wrap: 允许多行排列
    nowrap:(defaut) 不允许多行排列
    

  3. justifyContent : 定义子元素之间的排列方式

    flex-start:(default) 从行首开始排列。每行第一个弹性元素与行首对齐,同时所有后续的弹性元素与前一个对齐。
    flex-end: 从行尾开始排列。每行最后一个弹性元素与行尾对齐,其他元素将与后一个对齐。
    center: 伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。
    space-between: 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐,每行最后一个元素与行尾对齐。
    space-around: 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
    

  4. alignItems: 属性以与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐,默认为stretch。

子视图属性

    上面介绍的是父视图的属性,接下来介绍的是子视图的属性
  1. alignSelf : 定义子视图相对父容器的属性 相当于在父视图基础上从新设置子视图的位置

    enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')
    
    stretch:元素被拉伸以适应容器。
    center: 元素位于容器的中心。
    flex-start: 元素位于容器的开头。
    flex-end: 元素位于容器的结尾。
    


2. flex :相当于设置子视图的权重

参考

具体教程参考
http://www.jianshu.com/p/688b9108a922

源码地址

链接 https://github.com/yxwandroid/rnMydemo

关注公众号获取更多内容

2016-09-08 11:37:25 dongdong230 阅读数 2024
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57803 人正在学习 去看看 李宁

React Native通过一个基于Flexbox的布局引擎,在所有移动平台上实现了一致的跨平台样式和布局方案。

主要属性

  • flex
  • flexDirection
  • alignSelf
  • alignItems
  • justifyContent
  • flexWrap

属性讲解

flex

当一个元素定义了flex属性时,表示该元素是可伸缩的(flex的属性值大于0的时候才可伸缩),可以把它类比成android中的weight属性。

class FlexboxReact extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.flex_style_1}><Text>占1/6</Text></View>
        <View style={styles.flex_style_2}><Text>占1/3</Text></View>
        <View style={styles.flex_style_3}><Text>占1/2</Text></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  flex_style_1: {
    flex: 1,
    backgroundColor: 'red'
  },
  flex_style_2: {
    flex: 2,
    backgroundColor: 'white'
  },
  flex_style_3: {
    flex: 3,
    backgroundColor: 'blue'
  },
});

效果图:

flexDirection

flexDirection在React Native中只有两个属性值,row(横向伸缩)和column(纵向伸缩),默认为column:

class FlexboxReact extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.flex_style_1}><Text>占1/6</Text></View>
        <View style={styles.flex_style_2}><Text>占1/3</Text></View>
        <View style={styles.flex_style_3}><Text>占1/2</Text></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
  },
  flex_style_1: {
    flex: 1,
    backgroundColor: 'red'
  },
  flex_style_2: {
    flex: 2,
    backgroundColor: 'white'
  },
  flex_style_3: {
    flex: 3,
    backgroundColor: 'blue'
  },
});

上面代码仅仅修改了container样式:

  container: {
    flex: 1,
    flexDirection: 'row',
  },

效果图:

alignSelf

这个用法跟alignItems的很像,只是它用于单个组件alignSelf的对齐方式, 即该属性用来设置单独组件的竖直对齐方式,主要有四种:flex-start、flex-end、center、auto、stretch:

  • flex-start:与父容器首部对齐
  • flex-end:flex-end:与父容器尾部对齐
  • center:位于垂直位置
  • auto:按照自身设置的宽高来显示,如果没设置,效果跟streth一样
  • stretch:垂直拉伸
class FlexboxReact extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={[styles.view, styles.alignSelf_flexstart]}><Text>flex-start</Text></View>
        <View style={[styles.view, styles.alignSelf_flexend]}><Text>flex-end</Text></View>
        <View style={[styles.view, styles.alignSelf_center]}><Text>center</Text></View>
        <View style={[styles.view, styles.alignSelf_auto]}><Text>auto</Text></View>
        <View style={[styles.view, styles.alignSelf_stretch]}><Text>stretch</Text></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  view: {
    flex: 1,
    backgroundColor: 'red',
    borderWidth: 1,
    borderColor: 'blue',
  },
  alignSelf_flexstart: {
    alignSelf: 'flex-start',
  },
  alignSelf_flexend: {
    alignSelf: 'flex-end',
  },
  alignSelf_center: {
    alignSelf: 'center',
  },
  alignSelf_auto: {
    alignSelf: 'auto',
  },
  alignSelf_stretch: {
    alignSelf: 'stretch',
  },
});

alignItems

用于定义子组件在垂直方向上的对齐方式。有四个属性可设置:flex-start,flex-end,center,stretch。
- flex-start:与父组件在垂直方向上的首部对齐
- flex-end:与父组件在垂直方向上的尾部对齐
- center:处于父容器在垂直方向上的中间位置
- stretch:在垂直方向上填充整个容器

class FlexboxReact extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={[styles.view, styles.alignItems_flexstart]}>
          <Text style={styles.subView}>flex-start</Text>
        </View>
        <View style={[styles.view, styles.alignItems_flexend]}>
          <Text style={styles.subView}>flex-end</Text>
        </View>
        <View style={[styles.view, styles.alignItems_center]}>
          <Text style={styles.subView}>center</Text>
        </View>
        <View style={[styles.view, styles.alignItems_stretch]}>
          <Text style={styles.subView}>stretch</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  view: {
    flex: 1,
  },
  subView: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
    borderWidth: 1,
    borderColor: 'blue',
  },
  alignItems_flexstart: {
    alignItems: 'flex-start',
  },
  alignItems_flexend: {
    alignItems: 'flex-end',
  },
  alignItems_center: {
    alignItems: 'center',
  },
  alignItems_stretch: {
    alignItems: 'stretch',
  },
});

justifyContent

justifyContent和alignItems是相对的。它有五个属性可以设置,分别是flex-start,flex-end,center,space-between,space-around。

  • flex-start:伸缩项目与父容器起始端靠齐
  • flex-end:与父容器结尾端靠齐
  • center:水平居中
  • space-between:第一个子组件位于父容器起始端,最后一个子组件位于父容器结尾端。然后平均分配在父容器水平方向上
  • space-around:所有子组件平均分配在父容器的相应方向上,子组件两端都有留空隙
class FlexboxReact extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={[styles.view, styles.justifyContent_flexstart]}>
          <Text style={styles.subView}>Item 1</Text>
          <Text style={styles.subView}>Item 2</Text>
          <Text style={styles.subView}>Item 3</Text>
        </View>
        <View style={[styles.view, styles.justifyContent_flexend]}>
          <Text style={styles.subView}>Item 1</Text>
          <Text style={styles.subView}>Item 2</Text>
          <Text style={styles.subView}>Item 3</Text>
        </View>
        <View style={[styles.view, styles.justifyContent_center]}>
          <Text style={styles.subView}>Item 1</Text>
          <Text style={styles.subView}>Item 2</Text>
          <Text style={styles.subView}>Item 3</Text>
        </View>
        <View style={[styles.view, styles.justifyContent_between]}>
          <Text style={styles.subView}>Item 1</Text>
          <Text style={styles.subView}>Item 2</Text>
          <Text style={styles.subView}>Item 3</Text>
        </View>
        <View style={[styles.view, styles.justifyContent_around]}>
          <Text style={styles.subView}>Item 1</Text>
          <Text style={styles.subView}>Item 2</Text>
          <Text style={styles.subView}>Item 3</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
  },
  view: {
    flex: 1,
    borderWidth: 1,
    borderColor: 'black',
  },
  subView: {
    width: 50,
    height: 50,
    backgroundColor: 'red',
    borderWidth: 1,
    borderColor: 'blue',
  },
  justifyContent_flexstart: {
    justifyContent: 'flex-start',
  },
  justifyContent_flexend: {
    justifyContent: 'flex-end',
  },
  justifyContent_center: {
    justifyContent: 'center',
  },
  justifyContent_between: {
    justifyContent: 'space-between',
  },
  justifyContent_around: {
    justifyContent: 'space-around',
  },
});

flexWrap

flexWrap用于设置是否可换行,有两个属性可设置nowrap和wrap。

  • nowrap:即使空间不够也不换行,放不下的会冲出溢出屏幕
  • wrap:空间不够的话自动换行
class FlexboxReact extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={[styles.view, styles.flexWrap_nowrap]}>
          <Text style={styles.subView}>Item 1</Text>
          <Text style={styles.subView}>Item 2</Text>
          <Text style={styles.subView}>Item 3</Text>
          <Text style={styles.subView}>Item 4</Text>
          <Text style={styles.subView}>Item 5</Text>
          <Text style={styles.subView}>Item 6</Text>
        </View>
        <View style={[styles.view, styles.flexWrap_wrap]}>
          <Text style={styles.subView}>Item 1</Text>
          <Text style={styles.subView}>Item 2</Text>
          <Text style={styles.subView}>Item 3</Text>
          <Text style={styles.subView}>Item 4</Text>
          <Text style={styles.subView}>Item 5</Text>
          <Text style={styles.subView}>Item 6</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  view: {
    flex: 1,
    flexDirection: 'row',
    borderWidth: 1,
    borderColor: 'black',
  },
  subView: {
    width: 80,
    height: 80,
    backgroundColor: 'red',
    borderWidth: 1,
    borderColor: 'blue',
  },
  flexWrap_nowrap: {
    flexWrap: 'nowrap',
  },
  flexWrap_wrap: {
    flexWrap: 'wrap',
  },
});

转载请标注地址:Geek马走日
Follow个人Github : mazouri

2016-04-14 11:08:05 l_l_b 阅读数 2220
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57803 人正在学习 去看看 李宁

flex布局基本概念
flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。采用flex布局的元素,称为flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为flex项目(flex item),简称”项目”。
这里写图片描述
容器默认存在两根轴:主轴(main axis)和交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

容器属性:
flexDirection:布局方向,决定主轴的方向,默认值是column,即纵向布局
row |横向布局,主轴为水平方向
这里写图片描述
column|纵向布局,主轴为竖直方向
这里写图片描述

justifyContent:主轴方向对齐方式,默认值是flex-start,即主轴的开端

flex-start:主轴开端

center:主轴的中间位置
这里写图片描述

flex-end:主轴的末端位置
这里写图片描述

space-between:项目与项目之间插入相同距离的空隙
这里写图片描述

space-around:项目两旁插入相同距离的空隙
这里写图片描述

alignItems:交叉轴方向对齐方式,默认值flex-start,即交叉轴开端

flex-start:交叉轴开端

center:交叉轴的中间位置

flex-end:交叉轴的末端位置

flexWrap:包含内容,默认值是nowrap,不包裹所有内容

nowrap:不包裹内容
这里写图片描述

wrap:包裹内容
这里写图片描述

flex:布局权重
1:0 flex=0的项目占用空间仅为内容所需空间,flex=1的项目会占据其余所有空间
这里写图片描述

1:1
这里写图片描述

react native的flex布局详解

博文 来自: LJFPHP
没有更多推荐了,返回首页