coderyi

Weex学习与实践(三):iOS原理篇

Mon, 17 Oct 2016 00:00:00 +0800

Weex学习与实践(一):Weex,你需要知道的事

Weex学习与实践(二):iOS集成的tips

Weex学习与实践(三):iOS原理篇

本文主要介绍包括WeexSDK-iOS主要类介绍、Weex页面iOS端渲染流程、JS调用iOS方法

主要类

WXSDKEngine

WXSDKEngine主要用于初始化WeexSDK的环境

一开始会载入配置文件main.js并且注册一些默认的组件、模块以及handler

+ (void)initSDKEnviroment:(NSString *)script
{
   
    [self _registerDefaultComponents];
    [self _registerDefaultModules];
    [self _registerDefaultHandlers];
    
    [[WXSDKManager bridgeMgr] executeJsFramework:script];
}

在executeJsFramework前，会设置后JSContext的一些回调，例如

    _jsContext[@"callNative"] = callNativeBlock;

以方便JS调用native的方法。

executeJsFramework调用的是JSContext的evaluateScript方法，把main.js运行到jS的环境里面，之后再通过JSValue调用invokeMethod方法，把前面所有的components，modules，handlers注册进入JS环境

WXSDKInstance

一个WXSDKInstance就对应一个UIViewController,对应一个weex页面。

主要用来渲染页面,一般通过renderWithURL方法，然后能够接收一些回调和一些视图相关的方法

onCreate //根视图rootView创建的时候
renderFinish//视图渲染完成
componentForRef //通过视图索引拿到对应的组件视图

WXBridgeManager

WXBridgeManager 是JS与iOS通过JSCore交互的类,相关的类还有WXBridgeContext、WXJSCoreBridge。

比如调用JS

- (void)executeJsMethod:(WXBridgeMethod *)method
{
    if (!method) return;
    
    __weak typeof(self) weakSelf = self;
    WXPerformBlockOnBridgeThread(^(){
        [weakSelf.bridgeCtx executeJsMethod:method];
    });
}

JS调用native的话需要通过WXJSCoreBridge的registerCallNative方法

WXComponent

组件基类，自己实现iOS端的组件需要继承它。相关的还有负责组件初始化的工厂类WXComponentFactory，以及WXComponentManager

WXModuleProtocol

自定义module需要实现的协议

weex页面iOS端渲染流程

首先在ViewController里的render放初始化WXSDKInstance，因为render会支持实时刷新，所以每次都需要先销毁这个实例。

    [_instance destroyInstance];
    _instance = [[WXSDKInstance alloc] init];

然后WXSDKManager会保存instanceId

        [WXSDKManager storeInstance:self forID:_instanceId];

然后会调用renderWithURL方法来载入script,在这里会判断是本地文件还是需要从服务器下载，

- (void)renderWithURL:(NSURL *)url options:(NSDictionary *)options data:(id)data{
	    if ([url isFileURL]) {
        //from local
        dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
            NSString *path = [url path];
            NSData *scriptData = [[NSFileManager defaultManager] contentsAtPath:path];
            NSString *script = [[NSString alloc] initWithData:scriptData encoding:NSUTF8StringEncoding];
            [weakSelf renderView:script options:newOptions data:data];
        });
    }else{
    	//from server
    }
}

然后就会根据script文件渲染视图

[weakSelf renderView:script options:newOptions data:data];

在这个方法里面首先会创建根视图，当创建完成时WXSDKInstance会收到onCreate的回调

    //TODO WXRootView
    WXPerformBlockOnMainThread(^{
        self.rootView = [[WXView alloc] initWithFrame:self.frame];
        if(self.onCreate) {
            self.onCreate(self.rootView);
        }
    });

之后再通过bridge调用JS方法来开始创建实例

    [self callJSMethod:@"createInstance" args:args];

然后这里会判断JSFramework也就是js有没有加载完成，然后再通过WXJSBridge的JSContext来执行js方法，这里调用的就是js的createInstance方法，args里面主要就是instanceID，we文件转化的js文件，和options。

- (void)callJSMethod:(NSString *)method args:(NSArray *)args
{
    [[_jsContext globalObject] invokeMethod:method withArguments:args];
}

最后js会调用JSContext的callCreateFinish回调，最后调用WXSDKInstance的createFinish方法来结束页面的渲染

JS调用iOS方法

首先要注册一个组件

    [self registerModule:@"dom" withClass:NSClassFromString(@"WXDomModule")];

注册module的时候会通过下面方法

+ (void)registerModule:(NSString *)name withClass:(Class)clazz
{
    WXAssert(name && clazz, @"Fail to register the module, please check if the parameters are correct ！");
    
    NSString *moduleName = [WXModuleFactory registerModule:name withClass:clazz];
    NSDictionary *dict = [WXModuleFactory moduleMethodMapsWithName:moduleName];
    
    [[WXSDKManager bridgeMgr] registerModules:dict];
}

把所有通过宏注册的方法发送给js端

WX_EXPORT_METHOD(@selector(createBody:))

这会把方法暴露出来，并且方法名字是”wx_export_method_“加代码所在行号，wx_export_method_25

组件、模块是给js端用的，而handler则是给objc自己用的，所以不用发送消息给js端

然后通过methodForSelector拿到WX_EXPORT_METHOD方法的返回值，并且保存到methods中

- (void)registerModuleMethods {

            if ([currentClass respondsToSelector:selector]) {
                method = ((NSString* (*)(id, SEL))[currentClass methodForSelector:selector])(currentClass, selector);
            }
            [_methods setObject:method forKey:name];

}

然后拿到WXModuleConfig组成的_moduleMap之后再发送给JS端

    [[WXSDKManager bridgeMgr] registerModules:dict];

这里就是前面提到的调用JSContext的invokeMethod把内容发送到JS端

最后需要自己callNative的回调，当JS调用时就会传值到这里

- (void)registerCallNative:(WXJSCallNative)callNative
{
    NSInteger (^callNativeBlock)(JSValue *, JSValue *, JSValue *) = ^(JSValue *instance, JSValue *tasks, JSValue *callback){
        NSString *instanceId = [instance toString];
        NSArray *tasksArray = [tasks toArray];
        NSString *callbackId = [callback toString];
        
        return callNative(instanceId, tasksArray, callbackId);
    };
    
    _jsContext[@"callNative"] = callNativeBlock;
}

tasks里面包括方法的一些相关信息,包括module（比如dom），method（比如updateFinish），args

weex-devtool-iOS

weex-devtool-iOS 其实是 PonyDebugger的衍生品。

使用PonyDebugger调试iOS应用

FLEXNetworkObserver

Weex学习与实践(二):iOS集成的tips

Mon, 17 Oct 2016 00:00:00 +0800

Weex学习与实践(一):Weex,你需要知道的事

Weex学习与实践(二):iOS集成的tips

Weex学习与实践(三):iOS原理篇

本文主要介绍包括iOS上集成Weex、iOS上扩展组件、iOS上扩展module

iOS上集成Weex

集成weex，需要WeexSDK、WXDevtool两个库以及阿里未开源的ATSDK-Weex。

目前官方的alibaba/Weex仓库里面

    pod 'WeexSDK', :path=>'../sdk/'
    pod 'WXDevtool', :path=>'../WXDevtool/'
    pod 'ATSDK-Weex', '0.0.1'

它们直接使用的weex仓库的sdk,但是weex主仓库的WXDevtool已经不维护了，需要替换成，weexteam/weex-devtool-iOS的代码。

另外也可以直接从cocoapods的源pod仓库，但是cocoapods的源都是打包成framework,很多文件并没有设置为public，所以导致很多头文件没有暴露出来。

当然你也可以不用通过cocoapods集成，直接把代码拉进工程就可以，如果发生

Unknown type name 'NSString'

你可能需要把layout.c文件右侧的type改为Objective-C Source，或者直接修改为layout.m。

基本上JS页面是在WXDemoViewController工作的，你可能需要接收页面刷新的通知，以支持实时刷新

[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(notificationRefreshInstance:) name:@"RefreshInstance" object:nil];

页面会维护一个WXSDKInstance实例，WXSDKInstance就是weex渲染的实例对象，提供了很多页面渲染相关的接口，比如renderWithURL、refreshInstance、destroyInstance等

weex SDK 集成到工程 (integrate to ios)

Weex iOS SDK 集成指南

iOS上扩展组件

目前官方iOS这一块组件的代码在WeexSDK的component里面，组件有限，只有image，list，scroller等，如果想要实现自己的组件，首先需要继承WXComponent类。

然后实现方法

- (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance
{}

注意这个方法不在主线程，这里面接收一些js传过来的参数，以在js端写的image标记为例子

<image style="width: 100;height: 100;margin-top:20;margin-right:20;margin-left:220" src=></image>

到objc端就是

ref:701
type:image
styles:
{
    height = 100;
    marginLeft = 220;
    marginRight = 20;
    marginTop = 20;
    width = 100;
}
attributes:
{
    src = "https://avatars.githubusercontent.com/u/9892522?v=3";
}

ref（结点的唯一标识符）

然后在loadView的时候可能需要返回自己的objc组件

- (UIView *)loadView
{
    return [[WXImageView alloc] init];
}

然后你可以通过复写addEvent方法来增加一个change（UIControlEventValueChanged）、click（UIControlEventTouchUpInside）等事件

如果是image组件的话，你可能需要接收图片地址，这个时候需要通过实现了WXImgLoaderProtocol的WXImgLoaderDefaultImpl来处理，WXImgLoaderDefaultImpl实现了downloadImageWithURL方法，这里面通过SDWebImage来下载一张图片。

iOS 扩展 (extend to ios)

iOS上扩展module

这一块的代码在module分组里面，包括网络库stream，持久化storage等，你可以扩展自己module。

需要做的是实现WXModuleProtocol协议，并且写自己的方法就可以了，这里需要通过weex的宏把需要public的方法导出

WX_EXPORT_METHOD(@selector(fetch:callback:progressCallback:))

在module中目前是没有view的，但是你可以通过由js传过来的ref值拿到

    WXComponent *targetComponent = [self.weexInstance componentForRef:nodeRef];
    CALayer *layer = targetComponent.layer;
    UIView *view = targetComponent.view;

注意点

1.如果设置js文件在bundle中载入的话，需要把build的js文件拖入工程，如果的你的we里面一开始就调用了js文件，由于只会buildwe文件，所以还需要把之前的js文件拖入工程，另外examples里面判断iOSAssets是这样的

      var isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0;

你如果拖入自己的工程需要把WeexDemo.app的判断去掉

Weex学习与实践(一):Weex,你需要知道的事

Mon, 17 Oct 2016 00:00:00 +0800

Weex学习与实践(一):Weex,你需要知道的事

Weex学习与实践(二):iOS集成的tips

Weex学习与实践(三):iOS原理篇

本文主要介绍包括Weex基本介绍、Weex源码结构、初始化工程、we代码结构、Weex的生命周期、Weex的工作原理、页面间通信、boxmodel & flexbox、weex的缺点

基本介绍

A framework for building Mobile cross-platform UI

怎么解释它呢？我的理解就是weex = react-native +vue ，使用vue的API风格，两端的实现方式则和react-native，weex 比rn的优点就是一次编写三端运行。

IDE: Sublime Text + vue-syntax-highlight

命令行工具：weex-toolkit

调试工具: weex-devtool

weex分为组件component和模块（module）以及事件

weex-components : weex-components

组件就是各种标记组件，比如div 、slider、indicator等通过下面这种方式使用

<div>
  <image src="..."></image>
  <text>...</text>
</div>

js模块

let modal = require('@weex-module/modal');
modal.toast({
  "message":"我是提示框",
  "duration":2
});  

其他的还有stream,dom，animation之类的

事件

  <div onviewappear="viewappear" onviewdisappear="viewdisappear">
          ......
  </div>

Weex源码结构

package.json

node_modules依赖，更重要的是里面包含了npm run xxx 等快捷命令。比如之前我们运行node.js程序是这样的：$ node xx.js。这里我们可以把它配置化，例如package.json文件中scripts的 “build:config”: “node build/config.frameworks.js”，其实就是npm run build:config 相当于执行了node build/config.frameworks.js

start文件: 启动程序文件，里面包换编译和启动脚本：

examples: 示例Demo

android/ios/html：各平台代码

build：打包各平台的脚本，配置在package.json中。

参考链接:第2篇了解Weex源码结构，修改example

初始化工程

初始化工程前需要先安装 homebrew，然后按照下面步骤创建一个工程。

$ brew install node             //通过brew安装node
$ npm install -g weex-toolkit   //通过node安装 weex-toolkit  
$ sudo gem install cocoapods    //安装iOS包管理工具 cocoapods
$ weex init                     //创建项目的文件
$ npm install                   //依赖安装 package.json文件
$ npm run dev                   //项目编译
$ npm run serve                 //启动轻量服务器  

这时有可能提示

npm WARN babel-loader@6.2.5 requires a peer of babel-core@^6.0.0 but none was installed.

你需要再

npm install babel-core

这时，打开浏览器，输入http://127.0.0.1:8080, 就会看到这个项目的效果:

参考链接:第3篇初始化工程

npm run dev 干了什么呢？

先看 package.json 文件

{
  "name": "demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack --watch",
    "serve": "serve -p 8080",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "serve": "^1.4.0",
    "webpack": "^1.13.1",
    "weex-html5": "0.2.18",
    "weex-loader": "^0.1.5"
  }
}

npm run dev实际上相当于 webpack –watch

webpack实际上是执行了默认的webpack.config.js配置文件

webpack.config.js 引入webpack和weex-loader，entry属性是表示入口文件，output表示输出文件，默认输出到dist文件夹。

require('webpack')
require('weex-loader')

var path = require('path')

module.exports = {
  entry: {
    main: path.join(__dirname, 'src', 'main.we?entry=true')
  },
  output: {
    path: 'dist',
    filename: '[name].js'
  },
  module: {
    loaders: [
      {
        test: /\.we(\?[^?]+)?$/,
        loaders: ['weex-loader']
      }
    ]
  }
}

不过这个自动产生的webpack.config.js的文件有个坑就是，你添加一个新的we文件，他不会自动build为js文件可以手动添加

  entry: {
    main: path.join(__dirname, 'src', 'main.we?entry=true'),
    translate: path.join(__dirname, 'src', 'translate.we?entry=true')
  }

不过推荐的是自己遍历所有的we文件

require('webpack')
require('weex-loader')

var path = require('path')
var fs = require('fs');

var entry = {};

function walk(dir, root) {
  var directory = path.join(__dirname, root, dir);
  fs.readdirSync(directory)
    .forEach(function(file) {
      var fullpath = path.join(directory, file);
      var stat = fs.statSync(fullpath);
      var extname = path.extname(fullpath);
      if (stat.isFile() &&
             (extname === '.we')) {
        var name = path.join(root, 'build', dir, path.basename(file, extname));
        entry[name] = fullpath + '?entry=true';
      } else if (stat.isDirectory() &&
                  file !== 'build') {
        var subdir = path.join(dir, file);
        walk(subdir, root);
      }
    });
}
walk('./', 'src');
module.exports = {
  entry: entry,
  output: {
    path: '.',
    filename: '[name].js'
  },
  module: {
    loaders: [
      {
        test: /\.we(\?[^?]+)?$/,
        loaders: ['weex-loader']
      }
    ]
  }
}

hugojing - webpack.config.js

duqian291902259 - webpack.config.js 第3篇初始化工程

入口文件index.html

这里可以参考 Integrate Weex HTML5 to your project

weex_extend_demo

weex代码结构

template内必须包含唯一的根节点作为父容器, div就是一个很好的选择，里面则是一些Native Components

style 支持盒子模型和Flexbox

weex内置了响应式的支持，页面的宽度是以750来做为标准，自动适配所有手机；

<template>
  <div>
    <div>子组件</div>
    <div>子组件</div>
  </div>
</template>

<style>
</style>
<script>
module.exports = {

  data: function () {
    return {
      x: 1,
      y: 2
    }
  }

  methods: {
    foo: function () {
      console.log('foo')
    }
  },

  computed: {
    z: function () {
      return this.x + this.y
    }
  },

  events: {
    custom: function (e) {
      console.log(e)
    }
  },

  init: function () {},
  created: function () {},
  ready: function () {}
}

</script>

script里面包含很多ViewModel Options，

data methods computed init, created, ready events

如果需要在模板里实现更多的逻辑判断,你可以使用’computed property’.

created是生命周期函数，这个时候模板还没有被渲染，常用来在这里定义数据的更新和获取；

ready是生命周期函数，这个时候模板被渲染，常用来做一些自己上报等；

weex- references - Weex Cheat Sheet

显然we文件的这些代码是不会被 native app 识别的，我们要想办法让这些代码可运行。所以我们同时做了三件事：

1.在本地用一个叫做 transformer 的工具把这套代码转成纯 JavaScript 代码

2.在客户端运行一个 JavaScript 引擎，随时接收 JavaScript 代码

3.在客户端设计一套 JS Bridge，让 native 代码可以和 JavaScript 引擎相互通信

所以紧接着第二步，就是用 transformer 对代码进行转换，变成客户端可运行的 JavaScript 代码

原图：本地开发时的 Weex Transformer 工作原理

在 transformer 中，我们主要的工作就是对 HTML、CSS、JavaScript 代码进行解析和重组。这里我们用到了三个非常重要的库：

HTML 解析工具：htmlparser

CSS 解析工具：cssom

JavaScript 解析工具：uglify-js

对无线电商动态化方案的思考（三）

对无线电商动态化方案的思考（二）

Weex 的生命周期

<script>
  module.exports = {
    data: {},
    methods: {},

    init: function () {
      console.log('在初始化内部变量，并且添加了事件功能后被触发');
    },
    created: function () {
      console.log('完成数据绑定之后，模板编译之前被触发');
    },
    ready: function () {
      console.log('模板已经编译并且生成了 Virtual DOM 之后被触发');
    },
    destroyed: function () {
      console.log('在页面被销毁时调用');
    }
  }
</script>

init内一般用于初始化一些内部变量，绑定一些自定义事件，这时还没有数据绑定，没有创建vdom，所以不能通过this获取到data和methods，也不能获取vdom的节点

created 完成了数据绑定，但还未开始编译模板，可以通过this获取data和methods，但不能获取vdom的节点

ready表示渲染完成，从子组件往上触发

destroyed 组件销毁，比如页面跳转，从子组件开始往上触发

Weex的工作原理

Weex详解：灵活的移动端高性能动态化方案 - 勾股&鬼道

对无线电商动态化方案的思考（二）

页面间通信

页面跳转是通过指定下一个页面的url，然后通过openurl或者push的方式来跳转

获取url的方式可以通过下面这段JS代码

function getAppBaseUrl(self) {
    var dir ='examples'
    var url = self.$getConfig().bundleUrl;
    var bundleUrl = url;
    bundleUrl = new String(bundleUrl);

    var nativeBase;
    var isAndroidAssets = bundleUrl.indexOf('file://assets/') >= 0;

    var isiOSAssets = bundleUrl.indexOf('file:///') >= 0;
    if (isAndroidAssets) {
      nativeBase = 'file://assets/';
    }
    else if (isiOSAssets) {
      nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1);
    }
    else {
      var host = 'localhost:12580';
      var matches = /\/\/([^\/]+?)\//.exec(self.$getConfig().bundleUrl);
      if (matches && matches.length >= 2) {
        host = matches[1];
      }
      nativeBase = 'http://' + host + '/' + dir + '/build/';
    }
    var h5Base = './index.html?page=./' + dir + '/build/';
    //Native端
    var base = nativeBase;
    //H5端
    if (typeof window === 'object') {
      base = h5Base;
    }
    return base
}

第六篇导航、页面跳转、stream、webview

页面通信有两种方式

1.通过 url 参数传递。

/**
 * 获取URL参数
 */
getUrlParam: function (key) {
    var t = this.$getConfig().bundleUrl;
    var reg = new RegExp('[?|&]' + key + '=([^&]+)');
    var match = t.match(reg);
    return match && match[1];
}

2.通过 localStorage 数据存储。

如果是组件间通信不是页面通信，则参考：组件之间通信 - (Communicate Between Components)

boxmodel & flexbox

weex支持boxmodel 和flexbox

下面这个是boxmodel

关于flexbox，可以看我的这篇文章[react-native的第一课

flexbox布局](http://coderyi.com/posts/react-native_first_lesson/#flexbox布局)

weex的缺点

1.Weex将整个app的宽度定死在750px，然后其他都是根据scale进行计算的，会导致适配不方便。

2.目前不支持iOS的presentViewController方法

3.很多组件和模块需要自己扩展（比如datepicker，iconfont，摄像头，二维码等）

几个小问题

1.之前weex是只支持es5，现在可以支持es6了。精华新版weex-loader@0.3.0-alpha，欢迎试用

2.怎么断点调试？

目前是可以断点调试的，可以参考下面文章

Weex调试神器——Weex Devtools使用手册

线上调试

3.weex支持本地图片吗？

根据官方答疑是可以的，但是我目前还没有尝试成功。

faq:use-local-image

4.weex-x的使用？

5.promise怎么使用？

issues - 1269

6.热更新方案是什么？

最后，希望有越来越多的人把weex用起来。

react-native的第一课

Fri, 22 Jan 2016 00:00:00 +0800

2016-01-22

coderyi

React-用于构建用户界面的JavaScript库
Flexbox布局
组件的生命周期
Navigator
react-native与原生交互
ES6与ES5
Promise
fetch
npm

React-用于构建用户界面的JavaScript库

React是作为MVC中V存在的，React有一个JSX的编译器，JSX 让你可以用 HTML 语法去写 JavaScript 函数调用。

举例JSX是以下写法：

<div>
     <MyLabel  text={TextLabel} />
     <MyTextfield />
     <MyButton textlabel='OK' />
</div>

如果不经过JSX转化，你就必须用下面JavaScript的写法：

React.createElement("div", null, 
     React.createElement(MyLabel, {text: TextLabel}), 
     React.createElement(MyTextfield, null), 
     React.createElement(MyButton, {textlabel: "OK"}))

其实如果是写界面，JSX的XML风格就看起来比JavaScript人性化了。

React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)，React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。

React 使用 Virtual DOM 来渲染 UI，当组件状态 state 有更改的时候，React 会自动调用组件的 render 方法重新渲染整个组件的 UI。

React之所以快，就是因为没有直接操作DOM，组件 DOM 结构就是映射到这个虚拟 DOM 上，React 在这个虚拟 DOM 上实现了一个 diff 算法，当要更新组件的时候，会通过 diff 寻找到要变更的 DOM 节点，再把这个修改更新到浏览器实际的 DOM 节点上，所以实际上不是真的渲染整个 DOM 树。这个虚拟 DOM 是一个纯粹的 JS 数据结构，所以性能会比原生 DOM 快很多。

React 操作具体可以看下图：

Flux是Facebook用来构建用户端的web应用的应用程序体系架构。它通过利用数据的单向流动为React的可复用的视图组件提供了补充。Flux应用主要包括三部分：dispatcher、store和views（React components）,dispatcher处理动作分发，维护Store之间的依赖关系，store是数据和逻辑部分，views是React组件，这一层可以看作controller-views,作为视图同时响应用户交互，最后其实还有一个action部分，提供dispatcher传递数据给store

参考链接：

React-中文文档

React：创建可维护、高性能的 UI 组件

极客学院-React 入门教程

Flexbox布局

Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)，以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。

基本上，伸缩项目是沿着主轴（main axis），从主轴起点（main-start）到主轴终点（main-end）或者沿着侧轴（cross axis），从侧轴起点（cross-start）到侧轴终点（cross-end）排列。

这里可以看一下flexbox的几个主要属性

flex-direction（适用于伸缩容器，也就是伸缩项目的父元素）

这个主要用来创建主轴，从而定义了伸缩项目放置在伸缩容器的方向。

flex-direction: row | row-reverse | column | column-reverse

flex-wrap(适用于伸缩容器) 这个主要用来定义伸缩容器里是单行还是多行显示，侧轴的方向决定了新行堆放的方向。

flex-wrap: nowrap | wrap | wrap-reverse

justify-content（适用于伸缩容器）

这个是用来定义伸缩项目沿着主轴线的对齐方式。当一行上的所有伸缩项目都不能伸缩或可伸缩但是已经达到其最大长度时，这一属性才会对多余的空间进行分配。

justify-content: flex-start | flex-end | center | space-between | space-around

align-item（适用于伸缩容器）

这个主要用来定义伸缩项目可以在伸缩容器的当前行的侧轴上对齐方式。可以把他想像成侧轴（垂直于主轴）的“justify-content”。

align-items: flex-start | flex-end | center | baseline | stretch

align-content(适用于伸缩容器)

这个属性主要是伸缩容器多行是主轴的对齐方式

align-content: flex-start | flex-end | center | space-between | space-around | stretch

参考链接：

一个完整的Flexbox指南

组件的生命周期

React组件的生命周期如下图：

所以组件生命周期就是有三个阶段：

实例化：当首次使用组件类时

存在期：当实例已经生成，修改属性时

销毁期：当组件卸载消亡时

参考链接：

React Native 中组件的生命周期

Navigator

Navigator和NavigatorIOS都可以用来管理应用中“场景”的导航（也可以称作屏幕）。导航器建立了一个路由栈，用来弹出，推入或者替换路由状态。主要的区别在于NavigatorIOS使用了iOS中的UINavigationController类，而Navigator则完全用js重写了一个类似功能的React组件。

关于Navigator，可以看一下下面的示例：

// index.ios.js

var {
    View,
    Navigator
} = React;
var FirstPageComponent = require('./FirstPageComponent');

var SampleComponent = React.createClass({
    render: function() {
        var defaultName = 'FirstPageComponent';
        var defaultComponent = FirstPageComponent;
        return (
        <Navigator
          initialRoute={ { name: defaultName, component: defaultComponent } }
          configureScene={() => {
            return Navigator.SceneConfigs.VerticalDownSwipeJump;
          }}
          renderScene={(route, navigator) => {
            let Component = route.component;
            if(route.component) {
              return <Component {...route.params} navigator={navigator} />
            }
          }} />
        );

    }
});

initialRoute={ { name: defaultName, component: defaultComponent } } 这个指定了默认的页面，也就是启动app之后会看到界面的第一屏。需要填写两个参数: name 跟 component。

configureScene 这个是页面之间跳转时候的动画，具体有哪些？可以看这个目录下，有源代码的: node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js

renderScene,我们先看到回调里的两个参数:route, navigator。route里其实就是我们传递的name,component。navigator是一个Navigator的对象，这里是返回route.component组件，然后navigator作为props传递给了这个component，我们可以在FirstPageComponent里面通过props.navigator拿到。

//FirstPageComponent.js
var {
    View,
    Text,
    TouchableOpacity
} = React;

var SecondPageComponent = require('./SecondPageComponent');

var FirstPageComponent = React.create({
    getInitialState: function() {
        return {
            id: 2,
        };
    },

    componentDidMount: function() {
    },

    _pressButton: function() {
        const { navigator } = this.props;
        if(navigator) {
            navigator.push({
                name: 'SecondPageComponent',
                component: SecondPageComponent,
                //这里多出了一个 params 其实来自于Navigator 里的一个方法的参数...
                params: {
                    id: this.state.id
                }
            });
        }
    },

    render: function() {
        return (
            <View>
                <TouchableOpacity onPress={this._pressButton}>
                    <Text>点我跳转并传递id</Text>
                </TouchableOpacity>
            </View>
        );
    }
});

在index.ios.js里面有

            return <Component {...route.params} navigator={navigator} />

“…“就是把route.params每个key作为props的一个属性，所以在FirstPageComponent.js设置的params值，将在它push到的页面接收到。

//SecondPageComponent.js
var {
    View,
    Text,
    TouchableOpacity,
} = React;

var FirstPageComponent = require('./FirstPageComponent');

var SecondPageComponent = React.create({
    getInitialState: function() {
        return {
            id: null
        };
    },
    componentDidMount: function() {
        //这里获取从FirstPageComponent传递过来的参数: id
        this.setState({
            id: this.props.id
        });
    },
    _pressButton: function() {
        const { navigator } = this.props;
        if(navigator) {
            navigator.pop();
        }
    },
    render: function() {
        return (
            <View>
                <Text>获得的参数: id={ this.state.id }</Text>
                <TouchableOpacity onPress={this._pressButton}>
                    <Text>点我跳回去</Text>
                </TouchableOpacity>
            </View>
        );
    }
});

参考链接：

新手理解Navigator的教程对于Navigator讲解的特别详细

react-native与原生交互

在React Native中，一个“原生模块”就是一个实现了“RCTBridgeModule”协议的Objective-C类，其中RCT是ReaCT的缩写。

为了实现RCTBridgeModule协议，你的类需要包含RCT_EXPORT_MODULE()宏。这个宏也可以添加一个参数用来指定在Javascript中访问这个模块的名字。如果你不指定，默认就会使用这个Objective-C类的名字。

JS可以调用Native的方法， Native代码：

RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location (RCTResponseSenderBlock)callback)
{
  RCTLogInfo(@"Pretending to create an event %@ at %@", name, location);
  NSArray *events = ...
  callback(@[[NSNull null], events]);
}

JS调用如下

var CalendarManager = require('react-native').NativeModules.CalendarManager;
CalendarManager.addEvent('Birthday Party', '4 Privet Drive, Surrey',(error,events) => {
        if (error) {
            alert(error)
        }else{
           alert(events)
        };
});

当然Native也可以调用JS native调用

#import "RCTBridge.h"
#import "RCTEventDispatcher.h"

@implementation CalendarManager

@synthesize bridge = _bridge;

- (void)calendarEventReminderReceived:(NSNotification *)notification
{
  NSString *eventName = notification.userInfo[@"name"];
  [self.bridge.eventDispatcher sendAppEventWithName:@"EventReminder"
                                               body:@{@"name": eventName}];
}

@end

在JS中订阅该事件

var { NativeAppEventEmitter } = require('react-native');

var subscription = NativeAppEventEmitter.addListener(
  'EventReminder',
  (reminder) => console.log(reminder.name)
);
...
// 千万不要忘记忘记取消订阅, 通常在componentWillUnmount函数中实现。
subscription.remove();

基于上面的规则，react-native对很多原生模块进行了封装，比如UIView，他们实现RCTViewManager类，RCTViewManager实现了协议RCTBridgeModule，这样JS就可以使用native组件了。

默认的情况下，react-native只注册一个RCTRootView，

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"CommunicateNativeDemo"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];

AppRegistry.registerComponent('CommunicateNativeDemo', () => CommunicateNativeDemo);

上面代码中注册的RCTRootView就是整个程序的入口，当然如果你有多个入口或者其他方面的需求，也可以注册多个，不native的不同地方使用JS模块。

AppRegistry.registerComponent('FirstView', () => CommunicateNativeDemo);
AppRegistry.registerComponent('SecondView', () => CommunicateNativeDemo);
AppRegistry.registerComponent('ThirdView', () => CommunicateNativeDemo);

然后把这三个组件通过RCTRootView加载到原生上

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.title = @"First View";
    AppDelegate *delegate = (AppDelegate *)[[UIApplication sharedApplication] delegate];
    RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:delegate.bridge moduleName:@"FirstView"];
    rootView.frame = CGRectMake(20, 84, [UIScreen mainScreen].bounds.size.width - 40, 200);
    [self.view addSubview:rootView];
}

react-native中Obj-C和JavaScript通信原理简单说一下，和我们经常用的bridge差不多，Obj-C调用JavaScript很简单，可以通过webview的stringByEvaluatingJavaScriptFromString:方法调用JavaScript代码；JavaScript调用Obj-C，则是通过web view的代理方法shouldStartLoadWithRequest：来接收JavaScript的网络请求从而实现调用。

ES6与ES5

ECMAScript 是 JavaScript 语言的国际标准，JavaScript 是 ECMAScript 的实现。ECMAScript 5和ECMAScript 6分别是2009年和2015年发布的，下面列出一些主要的ES6与ES5的不同写法。

引用

在ES5里，如果使用CommonJS标准，引入React包基本通过require进行，代码类似这样：

//ES5
var React = require("react-native");
var {
    Image,
    Text,
    PropTypes
} = React;  //引用不同的React Native组件

在ES6里，import写法更为标准

//ES6
import React, {
    Image, 
    Text,
    PropTypes
} from 'react-native';

导出单个类

在ES5里，要导出一个类给别的模块用，一般通过module.exports来导出

//ES5
var MyComponent = React.createClass({
    ...
});
module.exports = MyComponent;

在ES6里，通常用export default来实现相同的功能：

//ES6
export default class MyComponent extends React.Component{
    ...
}

给组件定义方法

给组件定义方法不再用名字: function()的写法，而是直接用名字()，在方法的最后也不能有逗号了。

//ES5 
var Photo = React.createClass({
    componentWillMount: function(){

    },
    render: function() {
        return (
            <Image source={this.props.source} />
        );
    },
});

//ES6
class Photo extends React.Component {
    componentWillMount() {

    }
    render() {
        return (
            <Image source={this.props.source} />
        );
    }
}

定义组件的属性类型和默认属性

在ES5里，属性类型和默认属性分别通过propTypes成员和getDefaultProps方法来实现

//ES5 
var Video = React.createClass({
    getDefaultProps: function() {
        return {
            autoPlay: false,
            maxLoops: 10,
        };
    },
    propTypes: {
        autoPlay: React.PropTypes.bool.isRequired,
        maxLoops: React.PropTypes.number.isRequired,
        posterFrameSrc: React.PropTypes.string.isRequired,
        videoSrc: React.PropTypes.string.isRequired,
    },
    render: function() {
        return (
            <View />
        );
    },
});

在ES6里，可以统一使用static成员来实现

//ES6
class Video extends React.Component {
    static defaultProps = {
        autoPlay: false,
        maxLoops: 10,
    };  // 注意这里有分号
    static propTypes = {
        autoPlay: React.PropTypes.bool.isRequired,
        maxLoops: React.PropTypes.number.isRequired,
        posterFrameSrc: React.PropTypes.string.isRequired,
        videoSrc: React.PropTypes.string.isRequired,
    };  // 注意这里有分号
    render() {
        return (
            <View />
        );
    } // 注意这里既没有分号也没有逗号
}

初始化state

//ES5 
var Video = React.createClass({
    getInitialState: function() {
        return {
            loopsRemaining: this.props.maxLoops,
        };
    },
})

ES6下，有两种写法：

//ES6
class Video extends React.Component {
    state = {
        loopsRemaining: this.props.maxLoops,
    }
}

不过我们推荐更易理解的在构造函数中初始化（这样你还可以根据需要做一些计算）：

//ES6
class Video extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            loopsRemaining: this.props.maxLoops,
        };
    }
}

把方法作为回调提供

在JS中，this指的是，调用函数的那个对象。在ES5下，React.createClass会把所有的方法都bind一遍，这样可以提交到任意的地方作为回调函数，而this不会变化。

//ES5
var PostInfo = React.createClass({
    handleOptionsButtonClick: function(e) {
        // Here, 'this' refers to the component instance.
        this.setState({showOptionsModal: true});
    },
    render: function(){
        return (
            <TouchableHighlight onPress={this.handleOptionsButtonClick}>
                <Text>{this.props.label}</Text>
            </TouchableHighlight>
        )
    },
});

在ES6下，你需要通过bind来绑定this引用，或者使用箭头函数（它会绑定当前scope的this引用）来调用

//ES6
class PostInfo extends React.Component
{
    handleOptionsButtonClick(e){
        this.setState({showOptionsModal: true});
    }
    render(){
        return (
            <TouchableHighlight 
                onPress={this.handleOptionsButtonClick.bind(this)}
                onPress={e=>this.handleOptionsButtonClick(e)}
                >
                <Text>{this.props.label}</Text>
            </TouchableHighlight>
        )
    },
}

需要注意的是，不论是bind还是箭头函数，每次被执行都返回的是一个新的函数引用，因此如果你还需要函数的引用去做一些别的事情（譬如卸载监听器），那么你必须自己保存这个引用

// 错误的做法
class PauseMenu extends React.Component{
    componentWillMount(){
        AppStateIOS.addEventListener('change', this.onAppPaused.bind(this));
    }
    componentDidUnmount(){
        AppStateIOS.removeEventListener('change', this.onAppPaused.bind(this));
    }
    onAppPaused(event){
    }
}

// 正确的做法
class PauseMenu extends React.Component{
    constructor(props){
        super(props);
        this._onAppPaused = this.onAppPaused.bind(this);
    }
    componentWillMount(){
        AppStateIOS.addEventListener('change', this._onAppPaused);
    }
    componentDidUnmount(){
        AppStateIOS.removeEventListener('change', this._onAppPaused);
    }
    onAppPaused(event){
    }
}

当然你也可以这样做

// 正确的做法
class PauseMenu extends React.Component{
    componentWillMount(){
        AppStateIOS.addEventListener('change', this.onAppPaused);
    }
    componentDidUnmount(){
        AppStateIOS.removeEventListener('change', this.onAppPaused);
    }
    onAppPaused = (event) => {
        //把方法直接作为一个arrow function的属性来定义，初始化的时候就绑定好了this指针
    }
}

参考链接：

React/React Native 的ES5 ES6写法对照表

Promise

其实已经有一些第三方库实现了 Promise 的功能：Q、when、WinJS、RSVP.js，这些库和 JavaScript 原生 Promise 都遵守一个通用的、标准化的规范：CommonJS组织制定的异步模式编程规范Promises/A+，jQuery 有个类似的方法叫 Deferred，但不兼容 Promises/A+ 规范，于是会有点小问题，使用需谨慎。jQuery 还有一个 Promise 类型，它其实是 Deferred 的缩减版，所以也有同样问题。

JavaScript是从ES6提供Promise对象的，这里简单讲一下原生的Promise。

Promise 对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和 Rejected（已失败）。Promise 对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对 Promise 对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

var promise = new Promise(function(resolve, reject) {
 if (/* 异步操作成功 */){
 resolve(value);
 } else {
 reject(error);
 }
});

promise.then(function(value) {
 // success
}, function(value) {
 // failure
});

Promise很好的解决了异步调用的问题，但是ES7 中有了更加标准的解决方案，新增了 async/await 两个关键词。async 可以声明一个异步函数，此函数需要返回一个 Promise 对象。await 可以等待一个 Promise 对象 resolve，并拿到结果。

async/await 究竟是怎么解决异步调用的写法呢？简单来说，就是将异步操作用同步的写法来写。先来看下最基本的语法（ES7 代码片段）：

const f = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(123);
    }, 2000);
  });
};

const testAsync = async () => {
  const t = await f();
  console.log(t);
};

testAsync();

对比 Promise

const f = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(123);
    }, 2000);
  });
};

const testAsync = () => {
  f().then((t) => {
    console.log(t);
  });
};

testAsync();

关于异步编程，JS里面还另一种访问就是RxJS，Reactive Programming，RP是什么，RP是针对异步数据流的编程，一定程度而言，RP并不算新的概念。Event Bus、点击事件都是异步流。Rx最近比较流行，下次有时间再看吧！

参考链接：

JavaScript Promises

Javascript 中的神器——Promise

JavaScript ES7 中使用 async/await 解决回调函数嵌套问题

「大概可能也许是」目前最好的 JavaScript 异步方案 async/await

RxJS 教程

fetch

JavaScript很长时间通过XMLHttpRequest来执行异步网络请求，XMLHttpRequest是基于事件的。fetch则是通过Promise来实现的，fetch的返回值是一个Promise对象

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  })
})

如果要异步操作的话

fetch('https://mywebsite.com/endpoint.php')
  .then((response) => response.text())
  .then((responseText) => {
    console.log(responseText);
  })
  .catch((error) => {
    console.warn(error);
  });

使用ES7的async/await语法来发起一个异步调用

async getUsersFromApi() {
  try {
    let response = await fetch('https://mywebsite.com/endpoint/');
    return response.users;
  } catch(error) {
    throw error;
  }
}

ES6中还有生成器（Generator），promise 和生成器（Generator）为开发者进行异步编程带来了极大便利。

生成器函数其实是基于迭代器实现的，并且有如下的结构：

function *myIterator() {
    while(condition) {
        yield value;    
    }   
}

yield关键字负责返回结果，它会暂停迭代器函数的执行直到它被再一次的调用。它也会记住函数的状态，而不是在下次执行的时候重新运行一切，它能够有效的记住上一次暂停的地方。

将Fetch API和生成器组合起来使用的一个场景是长轮询。长轮询是一种通过客户端不断发送请求给服务器直到获得响应的技术。生成器可以用于这样的场景来不断的yielding响应直到响应包含数据。

现在让我们编写生成器函数来不断的调用这个API，每次迭代会返回一个Promise对象。

    function *pollForWeatherInfo() {
        while(true) {
            yield fetch('/api/currentWeather', {
                method: 'get'   
            }).then(d => d.json()); 
        }   
    }

我们需要一个函数来不断的调用这个函数，并且检查每次返回的Promise是否存在天气信息。可以使用一个在下一次迭代时调用的递归函数来实现，并且只在发现了从服务器返回的值的时候才暂停这一过程。下面的代码展示了上述过程的实现

function runPolling(generator){
    if(!generator){
        generator = pollForWeatherInfo();
    }

    var p = generator.next();
    p.value.then(function(d){
        if(!d.temperature){
            runPolling(generator);
        } else {
            console.log(d);
        }
    });
}

runPolling();

参考链接：

示例代码源码-FetchAPI-Generators

使用Fetch API和ES6生成器来构建异步API

npm

react-native开发环境需要使用node.js,npm是Node.js默认的模块管理器，是一个命令行下的软件，用来安装和管理node模块。

Node模块采用npm install命令安装。每个模块可以“全局安装”，也可以“本地安装”。两者的差异是模块的安装位置，以及调用方法。

“全局安装”指的是将一个模块直接下载到Node的安装目录中，各个项目都可以调用。“本地安装”指的是将一个模块下载到当前目录的node_modules子目录，然后只有在当前目录和它的子目录之中，才能调用这个模块。一般来说，全局安装只适用于工具模块，比如npm和grunt。

默认情况下，npm install命令是“本地安装”某个模块。

$ npm install [package name]
$ npm install git://github.com/package/path.git
$ npm install git://github.com/package/path.git#0.1.0
$ npm install sax@latest
$ npm install sax@0.1.1
$ npm install sax@">=0.1.0 <0.2.0"

使用global参数，可以“全局安装”某个模块。global参数可以被简化成g参数。

$ sudo npm install -global [package name]
$ sudo npm install -g [package name]

–save：模块名将被添加到packages.json文件的dependencies，可以简化为参数-S。 –save-dev: 模块名将被添加到packages.json文件的devDependencies，可以简化为参数-D。

$ npm install sax --save
$ npm install node-tap --save-dev
 或者
$ npm install sax -S
$ npm install node-tap -D

npm install默认会安装dependencies字段和devDependencies字段中的所有模块，如果使用production参数，可以只安装dependencies字段的模块。

$ npm install --production

dependencies是项目中依赖的模块，如果你想要开发自己的npm模块，如果有人要使用，那么他们可能不需要你开发使用的外部测试或者文档框架。在这种情况下，最好将这些附属的项目列在devDependencies中。

参考链接：

npm模块管理器

npm的package.json中文文档

react-native组件库