React Native简介

一. React Native的由来

1. 它是什么

   1. React Native是Facebook在React.js Conf2015大会上推出的一个用于开发Android和iOS App的一个框架，主要编程语言是JavaScript，UI使用JSX(一种类似于XML的UI描述语言),

   2. 核心设计理念：

   即拥有Native的用户体验，又保留React的开发效率

2. 为什么出现

   1. 尽管在移动开发中，原生App的开发成本很高，但现阶段基于原生开发仍然是必须的，因为Web的用户体验扔无法超越Native，主要体现在：

      1. Native的原生控件有更好的体验
      2. Native有更好的手势识别
      3. Native有更合适的线性模型，尽管Web Worker可以解决一部分问题，但如图像解码、文本渲染，扔无法多线程渲染，这影响了Web的流畅性

3. 补充. React Native和React.js有什么区别

   1. 相同点

   任何一种平台框架都有两部分：UI和逻辑，对于这两种技术来说，UI都使用了JSX,而逻辑都使用了JS

   2. 不同点

   1. 主要区别还是JSX,不管是React Native，还是React.js,在UI上都有一种技术：虚拟DOM(Virtual DOM)

   2. 首先要了解什么是Virtual DOM

   a) web通过DOM管理Element,而DOM的效率是很低的，为了提高DOM的效率，React.js提供了Virtual DOM，这项技术的工作是完全放在内存中完成的，而且是增量修改DOM树，所以效率非常高
   
   b) React.js主要用于web开发，在运行时使用React.js将虚拟DOM装换成了实际DOM
   
   c) React Native主要用于开发Android和iOS App,就是在运行时将虚拟DOM映射成Android和iOS的本地控件
   

二. React的特点及优势

1. 特点

   1. 使用了虚拟DOM(Virtual DOM)

   2. 提供了响应式(Reactive)和组件化(Composable)的视图组件

   3. 将注意力集中保持在核心库，伴随于此，有配套的路由和负责处理全局状态管理的库

2. 优势

   1. 跨平台开发

      运用React Native，我们可以使用同一份业务逻辑核心代码来创建原生应用运行在Web端，Android端和iOS端；

   2. 最求极致的用户体验：实时热部署

   3. learn once,write everywhere(最具魅力)

      React Native不强求一份原生代码支持多个平台，所以不是write once,run anywhere

三. React Native开发注意事项

1. react native在iOS上仅支持iOS7以上，Android仅支持Android4.1以上

 中文帮助文档：

  http://reactnative.cn/docs/0.42/getting-started.html

 github地址：

  https://github.com/facebook/react-native

2. 由于React Native的版本更新速度很快，如果没有深厚的JavaScript基础，建议选择

   1. 功能适中，交互一般，不需要考虑特别多的系统原生支持

   2. 对于部分复杂的应用，可以考虑原生+React Native混合开发

四. React Native常用组件之View

1. JSX和组件的概念

1) react的核心机制之一就是虚拟DOM:可以在内存中创建虚拟DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能，传统的创建方式是

  var img = document.createElement("img");
  img.src="images/1.jpg";
  $("#main").appendChild(newBox);

  但这样的代码可读性并不好，于是react发明了JSX，利用我们熟悉的HTML语法来创建虚拟DOM

        var root = (

               <div class="box">

                  ![](images/1.jpg)

               </div>

             )

2. 在实际开发中，JSX在产品打包阶段已经编译成纯JavaScript，JSX的语法带来任何性能影响，因此，JSX本身并不是什么高深的技术，可以说只是一个比较高级但很直观的语法糖

语法糖：

  指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。

3. View组件中常用的属性

1) React Native组件View，其作用等同于iOS中的UIView,Android中的Android.view，或是网页中的<div>标签，它是所有组件的父组件

2) 样式见图

4. View组件运用

1) 实例

               var MyView = React.createClass({

                  render() {

                    return (

                      <View style={{flex:1,backgroundColor:"yellow"}}>
                
                         <View style={{width:300,height:50,background:"red"}}</View>

                      </View>

                    )
                  }
               })

2) 在途中的render函数中，我们返回了一个顶层的View，然后View中包含着另一个子层的View,我们在组件的style里面通过对象的方式设置组件的样式

3) 在React Native开发中，更加推荐我们采用StyleSheet来进行组件的布局，这样的话，代码在结构上会更加的清晰，也利于后期维护

4) 在React Native开发中，更加推荐我们采用StyleSheet来进行组件的布局，这样的话，代码在结构上会更加的清晰，也有利于后期维护

              var MyView = React.createClass({

                  render() {

                    return (

                      <View style={viewStyle.topView}>
                
                         <View style={viewStyle.innerView}</View>

                      </View>

                    )
                  }
               })

               var viewStyle = StyleSheet.create({

                  topView:{
         
                    flex:1,
                    backgroundColor:"yellow"

                  },

                  innerView:{

                    width:300,
                    height:50,
                    background:"red"
                  }
               })

五. FlexBox布局

1. 我们之前做的布局都是基于盒子模型，而现在我们有一种全新的布局方式-flex布局，它又叫做弹性盒模型，旨在通过弹性的方式来对齐和分布容器中的内容，使其能使用不同屏幕，为盒模型提供最大的灵活性，目前他已经得到了所有浏览器的支持。

   注意：在React中, padding和margin的用法照样是可行的

2. flex布局主要思想

   让容器有能力让其子项目能够改变其宽度、高度，以最佳方式填充可用空间

3. flexbox在开发中的应用场景

   1. 浮动布局
   2. 各种机型屏幕的适配
   3. 水平和垂直居中
   4. 自动分配宽度
      ....

4. flexbox布局原理

   容器默认存在两根轴：

   主轴：从上到下
   交叉轴：从左到右

   主轴和交叉轴始终是处于垂直状态

5. flexbox的常用属性

   1. flexDirection - 决定主轴的方向

      row:主轴为水平方向
      column:主轴为垂直方向

   2. justifyContent - 定义了伸缩项目在主轴线的对其方式

      flex-start: 伸缩项目向一行的起始位置靠齐

      flex-end: 伸缩项目向一行的结束为止靠齐

      center: 伸缩项目向一行的中间位置靠齐

      space-between: 两端对其，项目之间的间隔都相等

      space-around: 伸缩项目会平均地分布在行里，两端保留一半的空间

   3. alignItems - 定义项目在交叉轴上如何对齐

      flex-start:交叉轴的起点对齐

      flex-end:交叉轴的终点对齐

      center:交叉轴的中点对齐

      stretch: 如果项目未设置高度或者设为auto,将占满整个容器的高度

   4. flexWrap - 项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行

   nowrap(默认值)：不换行
   wrap：换行，第一行在上方

   由于在rn 0.28之后的版本上官方已经修改了flexWrap:'wrap'的工作方式了，之前版本的是flexWrap:'wrap'和默认的alignItems: 'stretch'是一起工作的；如果是0.28之后的版本，你需要加上alignItems: 'flex-start'

6. flexbox的元素属性

   1. flex - 设置元素的宽度

      宽度= flex/父元素剩余宽度

      容器需要添加flexDirection才能让子元素flex

   2. alignSelf - 单个元素的对齐方

   a. 可覆盖align-items属性,默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

   b. 可选值：

    auto/flex-start/flex-end/center/stretch
   

七. 获取当前屏幕的宽度、高度

首先需要获取到系统的Dimensions类库

  var dimensions = require("Dimensions");

  var {width,height} = Dimensions.get("window");

八. 绝对定位与相对定位

 1. 与之前所学的CSS定位不同，在React Native中定位不需要再父组件中设置position属性

 2. 而且如果父组件设置了内边距，relative会做出相应的定位改变,而absolute则不会