第一个知识点:ES6新特性

ES6也已经出来了很久,作为一名前端,我们应该有了解了不少,下面是ES6最主要的几个特性

1、let和const

let可以声明具有块级作用域的变量,const是用来定义常量的。

const定义引用类型时,是指引用的地址不可变

2、arrow function

箭头函数,箭头函数可以简化匿名函数的写法,并且可以将this静态绑定到对象,而不会因运行上下文的变化而变化:

这里在箭头函数里,this对象已经静态绑定到Person这个对象了,不会随着运行上下文的改变而改变。

3、函数参数

默认值 Default

4、…形参 Rest

可以通过…形参将参数转化为数组,跟arguments作用类似,只不过箭头函数内部是取不到arguments的值的

5、Destructuring 解构

解构赋值,按照一定的规则从数组和对象中提取值,对变量进行赋值

使用BABEL编译后变成这样

这个东西非常有用,在插入大段html内容到文档中时,显得很方便

6、Class
使用Class语法糖可以很方便地实现类以及继承代码

super指代父类的实例(也即是父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。
这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。

7、Modules

在ES6之前,模块化的解决方案一般有两种:CommonJS(服务器端)和AMD(浏览器端,如require.js,但是在此之前,其实我也没用过它们),、

需要注意的是大括号里的变量名需与模块里export的接口名称相同,引入其他模块的默认值(default)可以直接写在大括号外

第二个知识点:reactJs

既然你敢说学react-native,应该不至于没了解过reactJS吧。

这已经是一个非常流行的框架,大家一定都有去了解一些相关知识,其实作为react-native入门,了解一些就够用了。

React是由ReactJS与React Native组成,其中ReactJS是Facebook开源的一个前端框架,React Native 是ReactJS思想在native上的体现!

JSX并不是一门新的语言,仅仅是个语法糖,允许开发者在JavaScript中书写HTML语法。,最后每个HTML标签都转化为JavaScript代码来行。

3

其实我们需要掌握的东西不多,你只要能写出这个就够了,so easy!

整个代码的逻辑就是:
通过构建一个一个HelloMessage的组件,组件的内容为一个h1标签,h1标签里输出hello+HelloMessage的name属性值+!我是wushaoxion 并将HelloMessage插入到id为example的div中。

输出的结果为:hello ReactJs! 我是wushaoxion
第三个知识点:flexbox布局

这是最简单的一个内容了。但是我却很不好意思的放在了最后面。

flexbox是Flexible Box的缩写,弹性盒子布局 主流的浏览器都支持。flexbox布局是伸缩容器(container)和伸缩项目(item)组成Flexbox布局的主体思想是元素可以改变大小以适应可用空间,当可用空间变大,Flex元素将伸展大小以填充可用空间,当Flex元素超出可用空间时将自动缩小。总之,Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩。伸缩容器有主轴和交叉轴组成! 主轴既可以是水平轴,也可以是垂直轴

flexbox目前还处于草稿状态,所有在使用flexbox布局的时候,需要加上各个浏览器的私有前缀,即-webkit -moz -ms -o等

但是在做移动端页面的时候,这也是一个很不错的布局方式伸缩容器的属性

1.display
display:flex | inline-flex 块级伸缩容器 行内级伸缩容器

2.flex-direction
指定主轴的方向 flex-direction:row(默认值)| row-reverse | column | column-reverse

3.flex-wrap
伸缩容器在主轴线方向空间不足的情况下,是否换行以及该如何换行flex-wrap:nowrap(默认值) | wrap | wrap-reverse

4.flex-flow
是flex-direction和flex-wrap的缩写版本,它同时定义了伸缩容器的主轴和侧轴 , row

5.justify-content
用来定义伸缩项目在主轴线的对齐方式,语法为: justify-content:flex-start(默认值) | flex-end | center | space-between | space-around

6.align-items
用来定义伸缩项目在交叉轴上的对齐方式,语法为: align-items:flex-start(默认值) | flex-end | center | baseline | stretch

7.align-content
用来调整伸缩项目出现换行后在交叉轴上的对齐方式,语法为: align-content:flex-start | flex-end | center | space-between | space-around | stretch(默认值)

我们暂且不必要了解太多,明白在RN中怎么使用就可以了
RN目前主要支持flexbox的如下6个属性:

1.alignItems
用来定义伸缩项目在交叉轴上的对齐方式,语法为: alignItems:flex-start(默认值) | flex-end | center | stretch

2.alignSelf
用来设置单独的伸缩项目在交叉轴上的对齐方式,会覆盖默认的对齐方式,其语法为:alignSelf:auto | flex-start | flex-end | center | stretch(伸缩项目在交叉轴方向占满伸缩容器,如果交叉轴为垂直方向的话,只有在不设置高度的情况下才能看到效果)

3.flex
是flex-grow flex-shrink flex-basis这三个属性的缩写,其语法为:flex:none | flex-grow flex-shrink flex-basis,其中第二个和第三个参数为可选参数,默认值为:0 1 auto

4.flexDirection
指定主轴的方向 flex-direction:row| row-reverse | column(默认值) | column-reverse

5.flexWrap

6.justifyContent

以上是我个人总结,还望大神补充

1 收藏


直接登录