•1.1语法
•ES6语法：ECMAScript6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言
•参考网站：http://es6.ruanyifeng.com/#docs/intro
•1.2布局
•特点：
•1）在React
Native中布局采用的是FleBox(弹性框)进行布局。
•2）像素无关，在React
Native中尺寸是没有单位的，它代表了设备独立像素。
•3）React
Native中的FlexBox和WebCSS上FlexBox工作方式是一样的。但有些地方还是有些出入的。
1.2.1ReactNative所支持的Flex属性（父容器）
•1）父容器属性
•flexDirection enum('row', 'column','row-reverse','column-reverse')
•flexWrapenum('wrap',nowrap')
•justifyContentenum('flex-start','flex-end', 'center', 'space-between', 'space-around')
•alignItemsenum('flex-start','flex-end', 'center', 'stretch')
•2）主轴与侧轴：flexDirection是row时，主轴即水平方向的轴线，可以理解成横轴，侧轴垂直于主轴，可以理解为竖轴。flexDirection是column时主侧轴刚好相反
1.2.2Flex属性介绍
•1）flexDirection
•row:从左向右依次排列
•row-reverse:从右向左依次排列
•column(default):默认的排列方式，从上向下排列
•column-reverse:从下向上排列
flexDirection
•2）flexWrap属性定义了子元素在父视图内是否允许多行排列，默认为nowrap。
•nowrapflex的元素只排列在一行上，可能导致溢出。
•wrap
flex的元素在一行排列不下时，就进行多行排列。
flexWrap
•3）justifyContent定义了浏览器如何分配顺着父容器主轴的弹性（flex）元素之间及其周围的空间，默认为flex-start。
•flex-start(default)从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。
•flex-end从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。
•center伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。
•space-between在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
•space-around在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
justifyContent
•4）alignItems以与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐，默认为stretch
•flex-start元素向侧轴起点对齐。
•flex-end元素向侧轴终点对齐。
•center元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。
•stretch弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。
alignItems
1.2.3子容器Flex属性
•alignSelfenum('auto','flex-start', 'flex-end', 'center', 'stretch')
•flexnumber
•1）alignSelf以属性定义了flex容器内被选中项目的对齐方式。注意：alignSelf属性可重写灵活容器的alignItems属性。
•auto(default)元素继承了它的父容器的align-items属性。如果没有父容器则为"stretch"。
•stretch元素被拉伸以适应容器。
•center元素位于容器的中心。
•flex-start元素位于容器的开头。
•flex-end元素位于容器的结尾。
alignSelf
•2）flex定义了一个可伸缩元素的能力，默认为0。
flex
1.2.4其他布局 in React Native
•1）视图边框
•borderBottomWidthnumber 底部边框宽度
•borderLeftWidthnumber左边框宽度
•borderRightWidthnumber 右边框宽度
•borderTopWidthnumber顶部边框宽度
•borderWidthnumber边框宽
•borderColor个方向边框的颜
•borderColor边框颜色
•2）尺寸
•widthnumber
•height
number
•3）外边距
•margin
number 外边距
•marginBottomnumber下外边距
•marginHorizontalnumber左右外边距
•marginLeftnumber左外边距
•marginRightnumber右外边距
•marginTopnumber上外边距
•marginVerticalnumber上下外边距
•4）内边距
•padding
number 内边距
•paddingBottomnumber下内边距
•paddingHorizontalnumber左右内边距
•paddingLeftnumber做内边距
•paddingRightnumber右内边距
•paddingTopnumber上内边距
•paddingVerticalnumber上下内边距
•5）定位(position)
•absolute：生成绝对定位的元素，元素的位置通过"left","top", "right" 以及"bottom"属性进行规定。
•relative：生成相对定位的元素，相对于其正常位置进行定位。"left:20"会向元素的LEFT位置添加20像素。
•1.3组件生命周期与通信
•1.3.1生命周期
•所谓生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键
参考：
•1.3.2组件间通信
•1）组件之间有三种可能的关系
•父组件向子组件通信
•子组件向父组件通信
•非父子组件之间的传值
•2）父组件向子组件通信
•父组件向子组件传值
•通过props传递
在父组件中name='我是父组件向子组件传递的参数'
•在子组件中通过this.props.name获取
•父组件向子组件传递方法
•与传递参数方法相同，通过props方法这样传递test={this.onParentClick1}
•在子组件中触发这个方法this.props.test();
•3）子组件向父组件通信
•子组件向父组件传值
•在子组件state中定义一个参数this.state= {name : '我是子组件向父组件传递的参数'};
•在父组件中给子组件绑定ref,<Children ref="children"/>
•在父组件中获取子组件的state,如this.refs.childern.state.name
•子组件向父组件传递方法
•同样通过ref来获得，前两步与传参方法相同。
获取方法的方式也同样this.refs.childern.onChildenCilck2();
•4）非父子组件之间的传值
•组件之间无关联的形式与子组件向父组件传值的方式相同
•通过ref给组件标记一个名字，同样通过this.refs.***.state/function方法相互调用。
网友评论