第一章 ReactNative
一. react-native简介
React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域
二.react-native优势
|
|
Native App |
Web App |
Hybrid App |
React Native App |
|
原生功能体验 |
优秀 |
差 |
良好 |
接近优秀 |
|
渲染性能 |
非常快 |
慢 |
接近快 |
快 |
|
是否支持设备底层访问 |
支持 |
不支持 |
支持 |
支持 |
|
网络要求 |
支持离线 |
依赖网络 |
支持离线(资源存本地情况) |
支持离线 |
|
更新复杂度 |
高(几乎总是通过应用商店更新) |
低(服务器端直接更新) |
较低(可以进行资源包更新) |
较低(可以进行资源包更新) |
|
编程语言 |
Android(Java),iOS(OC/Swift) |
js+html+css3 |
js+html+css3 |
主要使用JS编写,语法规则JSX |
|
社区资源 |
丰富(Android,iOS单独学习) |
丰富(大量前端资源) |
有局限(不同的Hybrid相互独立) |
丰富(统一的活跃社区) |
|
上手难度 |
难(不同平台需要单独学习) |
简单(写一次,支持不同平台访问) |
简单(写一次,运行任何平台) |
中等(学习一次,写任何平台) |
|
开发周期 |
长 |
短 |
较短 |
中等 |
|
开发成本 |
昂贵 |
便宜 |
较为便宜 |
中等 |
|
跨平台 |
不跨平台 |
所有H5浏览器 |
Android,iOS,h5浏览器 |
Android,iOS |
|
APP发布 |
App Store |
Web服务器 |
App Store |
App Store |
第二章 环境的搭建
React-native环境搭建(window10)已有androidstudio开发环境
1． 安装Python最新版本(https://www.python.org/downloads/release/python-2710/)
2． 安装note.js 最新版本(https://nodejs.org/en/)
3． 安装react-native命令行工具（npminstall -g react-native-cli）
第三章 实例
新建react项目
1．进入你的工作目录例如d:/workspace，输入命令react-nativeinit projectname(需要数十分钟或者更长)
2. 运行package，输入命令react-nativestart（首次运行需要下载东西需要等一会或者更长）
3．运行项目，输入命令react-nativerun-android,可以安装模拟器BlueStacks，也可以安装到真机上（运行到真机注：手机和电脑同一网络环境下最好连同一个wifi；摇晃手机调用调试界面；android5.0以上的手机adb reverse tcp:8081 tcp:8081；5.0以下的系统在调试界面输入你的电脑的ip和端口号10.0.0.1:8081;Reload Js重新加载页面）
第四章 原有项目集成react-native
.React-native 集成到原有android项目中
a. 在项目的根目录运行
# npm init(创建了一个空的node模块（其实就是创建了一个package.json描述文件）)
# npm install --save react react-native(则创建了node_modules目录并把react和react-native下载到了其中)
# curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
第三行命令在window下不支持可以直接在浏览器输入上面的url下载放到项目根目录中
b. 下面我们打开新创建的package.json文件，然后在其scripts字段中加入:
c. 接下来在项目根目录中创建index.android.js文件，然后将下面的代码复制粘贴进来：
d. 在你的app中 build.gradle 文件中添加 React Native 依赖:
dependencies {
compile"com.facebook.react:react-native:+"// From node_modules.和package.json中保持一直
}
e. 在项目的 build.gradle文件中为 React Native添加一个 maven 依赖的入口，必须写在 "allprojects"代码块中:
allprojects { repositories { jcenter() maven { // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm url "$rootDir/node_modules/react-native/android" } } }
f．接着，在 AndroidManifest.xml清单文件中声明网络权限:
<uses-permission android:name="android.permission.INTERNET"/>
如果需要访问 DevSettingsActivity 界面，也需要在 AndroidManifest.xml 中声明:
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
g. 想要通过原生代码调用 React Native ，就像这样，我们需要在一个 Activity中创建一个 ReactRootView对象，将它关联一个 React application并设为界面的主视图。具体代码如下图所示：
o. 运行项目
在项目根目录输入npm start;然后点击android studio运行。
第五章 实现打电话功能
. React-native调用android本地方法(目标为调用打电话的功能)
1. 我们首先来创建一个原生模块。一个原生模块是一个继承了ReactContextBaseJavaModule的Java类如下附件：
ReactContextBaseJavaModule要求派生类实现getName方法。这个函数用于返回一个字符串名字，这个名字在JavaScript端标记这个模块。这里我们把这个模块叫做MyNativeModule，这样就可以在JavaScript中通过React.NativeModules. MyNativeModule访问到这个模块.
2．要导出一个方法给JavaScript使用，Java方法需要使用注解@ReactMethod。方法的返回类型必须为void。
React Nativ的跨语言访问是异步进行的.
3.在Java这边要做的最后一件事就是注册这个模块。我们需要在应用的Package类的createNativeModules方法中添加这个模块。如果模块没有被注册，它也无法在JavaScript中被访问到。如下附件：
4. 这个package需要在MainApplication.java文件的getPackages方法中提供。这个文件位于你的react-native应用文件夹的android目录中。具体路径是: android/app/src/main/java/com/your-app-name/MainApplication.java.如下附件：
5．在js中调用，在index.android.js中引入NativeModules，按照如下图调用：
第六章 参考资料
一．参考文档
http://reactnative.cn/docs/0.42/getting-started.html
二．调用打电话源码连接
链接：http://pan.baidu.com/s/1geRm5jX 密码：a76b