RN中的flex布局

Flex

是CSS3中的一种新的布局模式,是可以自动调整子元素的高和宽,来很好的填充任何不同屏幕大小的显示设备中的可用显示空间,收缩内容防止内容溢出,确保元素拥有恰当的行为的布局方式。

  • flex的主要概念
  • 1、容器 和 子项目
    • 容器的属性 和成员的属性(这个一定要弄清楚,不能瞎用,否则是浪费时间)
  • 2、主轴 和 侧轴
    • 主轴默认的方向是水平
    • 容器使用主轴的方向
    • 主轴和侧轴是垂直关系
    • 当你改变主轴方向为垂直的时候,想要成员水平居中,这时应该设置侧轴的属性align-items:center

image

  • 3、RN中flex的属性
属性名取值描述
flexDirectionrow, row-reverse, column, column-reverse对应 CSS flex-direction 属性,默认为column
flexWrapwrap, nowrap对应 CSS flex-wrap 属性,但阉割了 wrap-reverse 取值
justifyContentflex-start, flex-end, center, space-between, space-around对应 CSS justify-content 属性,但阉割了 stretch 取值。
alignItemsflex-start, flex-end, center, stretch,baseline对应 CSS align-items 属性。
alignContentflex-start, flex-end, center, stretch, space-between, space-around对应 CSS align-items 属性。
flexnumber对应 CSS flex 属性,但只能为正整数值才会具有弹性
alignSelfauto, flex-start, flex-end, center, stretch,baseline对应 CSS align-self 属性
flexGrownumber对应 CSS flex-grow 属性
flexShrinknumber对应 CSS flex-shrink 属性
flexBasisnumber对应 CSS flex-basis 属性
  • 4、复杂的flex应用

    • 三栏布局
    • 全局布局
    • 悬挂式布局
    • 水平垂直居中
    • 平分等分布
  • 5、 flex的优缺点

  • 优点:对于某些复杂的布局很容易实现

  • 缺点:兼容性,不能兼容IE9及以下浏览器,移动端都能支持
    image

与web的不同

  • 1、StyleSheet.create来集中定义组件的样式,然后通过style属性来实现。驼峰式的写法,作为对象让移动端浏览器解析。长度不用加单位“px”,字符串比如色值需要加引号写成字符串
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

  • 2、具有组合性。样式组合是数组形式,web是字符串 空格隔开
<Image source={require('./img/arrow.png')} style={[styles.arrow,{display:this.state.hasArrow}]}/>
  • 3、具有覆盖性。
    • RN属性在使用数组对象样式时,如果有两个对象的样式属性相同,RN会默认选择最后一个。
    • 继承时的覆盖,只有最近原则和最直接原则。
    • 没有优先级思想。因为不需要id,class之类的所以没有优先级。
  • 4、支持条件性。RN支持条件性样式
<View style={this.state.touching&&styles.highlight}>
  • 5、具有传递性。RN支持样式传递
    在调用组件的时候,可将样式作为参数进行传递。View.propTypes.style和Text.propTypes.style.
propTypes:{
    style:View.propTypes.style,
    textStyle:Text.propTypes.style
}
用的时候:
<View style={this.props.style}>
  • 6、具有部分继承性

    • 样式的继承只存在于Text元素内的Text元素,换句话说是Text元素里面的Text元素存在继承;继承的规则是子Text元素继承祖先Text和父Text元素的样式整合后的样式。
    • 包裹在View元素中的Text表现为block,可以设置margin和padding的各种属性;包裹在Text元素中的Text表现为inline元素,不能设置其marginTop和marginBottom, padding等用于block元素的属性
  • 7、布局样式的不同

    • 没有的属性order、flex-flow
    • RN的flex布局默认为column布局,css的默认为row布局
    • view 相当于web中的
      ,会占容器100%的宽度,不能用fontSize属性
  • 8、position属性只有absolute和relative,不能用zIndex。

    • 在RN开发中,决定用什么布局的是由child来决定的,React Native中的position默认为relative,相对于 上一个兄弟节点
    • React Native中的position默认为relative,所以绝对定位总是相对于父节点的
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页