React Native

RN|很RN的部分|样式相关

Posted by mieruko on 2017-03-22

前言

很“RN”的部分是相对于上一篇中很React的部分来说的。也就是说RN作为一个用于移动端开发的框架，它有一些特性是正常的前端框架所没有，而和移动开发关系很紧密的性质。

RN没有长度单位

这一点很特别，在RN中，我们写长度宽度啥的都直接写数字。然后，它会根据你手机的类型自动适配一个单位。如果是安卓系统，单位就是dp,如果是ios系统，单位就是pt。
dp这个单位还因手机而异，但是pt就是一个绝对单位，它代表1/72英寸。

RN不能设置百分比

RN中不能通过设置百分比来设置宽度或者高度～～

tips：

  • 可以通过Dimensions模块来获取宽高
  • 可以通过全局对象PixelRatio来获取像素密度 （即每英寸屏幕所拥有的像素数）

轴的概念

在RN的布局方向上，有一个轴的概念，我们区分主轴和侧轴。
主轴是谁，侧轴是谁，要根据flexDirection这个属性的具体设置来看。
默认情况下，y轴为主轴，x轴为侧轴。

RN中的样式设置方式

在RN中，样式是写在style属性里面的。
样式本身，是以对象的形式呈现的。
比如： 

1
2
<View style={{flexDirection:"row",backgroundColor:"gray"}}>
</View>

RN中样式的写法注意

RN中的样式写法，其实除了下文我们点名的这些新属性，其余都是与css中的样式名称写法一致的。
唯一的不同是，css中我们习惯把两个单词中间加短横线连接，RN中采用首字母小写的驼峰法：
border-bottom->borderBottom
margin-right->marginRight
以此类推～～

RN中的布局相关属性

flexDirection

可取的值有： row, row-reverse, column, column-reverse
这个属性定义父视图中子元素的排列方式。就是设置主轴。
row即是按行排列(从左往右，主轴x轴)，row-reverse是从右向左。column是列排列，从上往下，主轴y轴，column-reverse是从下往上。
这其中，column是flexDirection属性的默认取值。

flexWrap

可取的值有： nowrap wrap
这个属性设置在父视图中子元素是否能够自动换行。
nowrap设置不换行，wrap设置换行，nowrap为默认取值。

justifyContent

可取的值有：flex-start, flex-end, center, space-between, space-around
这个属性定义父元素中的子元素排列时的排列顺序和对齐方式。

  • flex-start:从行首开始排列，每行第一个元素与行首对齐，所有后续的元素与前一个对齐。
  • flex-end: 从行尾开始排列，每行第一个元素与行尾对齐，其他元素与后面一个元素对齐。
  • center: 元素向每行的中点排列。每行的第一个元素到行首的距离和每行的最后一个元素到行尾的距离相等。
  • space-between:从行首开始排列，每行第一个元素与行首对齐，最后一个元素与行尾对齐，元素与元素之间距离相等。
  • space-around:和space-between相似，不同的是第一个元素到行首的距离和最后一个元素到行尾的距离都等于中间每两个元素之间距离的一半。

alignItems

可取的值有：flex-start, flex-end, center, stretch
这个属性是设置元素在侧轴和谁对齐。

  • flex-start: 和侧轴的起点对齐
  • flex-end: 和侧轴的终点对齐
  • center: 在侧轴方向上居中
  • stretch: 在侧轴方向上要不要被拉伸到和容器相同的高度或者宽度
    注意stretch如果一开始子元素的高或者宽已经设置了，那么它将不起作用。

—————–分割线—————-
以上这些属性，全部都是设置给父元素的。
下面是设置给子元素的属性:

alignSelf

可取的值： auto, flex-start, flex-end, center, stretch
这个属性的意义就是可以针对某一个子元素，重写父元素设置好的alignItems属性。
默认值是auto，就是说按照父元素的设定来。
其它都和alignItems中的对应属性值效果一样。

flex

这个属性的取值是取数字。默认是0，也就是不拉伸。
意义在于设置一个属性的拉伸能力，也就是争夺空间的能力。
对应的有一个公式:

占有的长\宽度 = 弹性长\宽度*(number/sum-number)

弹性长\宽度就是总长\宽减去固定长\宽剩下的那部分长度，后面乘上该元素的flex对应的number占所有number的和的比值。
比如说父视图高度100，主轴为y,我给四个子元素的flex分别设置为:1,1,1,1
那么它们将均分100，每个高度都是25。
如果我设置为1,2,1,1,那么四个子元素的高度比也会是1,2,1,1~~~
注意拉伸的效果不受宽高既定值的影响。

总结

这篇笔记对RN的样式方面的一些基础知识做了梳理。
可以看出和单纯的前端开发还是有所不同的啦～～～^_^

FEATURED TAGS
React Native