RN越来越火，小编 认为也有必要学习一把，虽然原生应用优势很明显，但是也存在着发版的痛点。
facebook为了解决这种痛点，出了RN。
本人不太建议成熟的app，从新使用RN开发，人力资源耗费太多。
废话不多说了。
第一讲，建立原生应用，然后配置成RN环境。
1 使用android studio，生成TestHello项目
android studio建立新项目很简单，大家都会，当然你有成熟的项目，尤其是购物项目，可以直接使用，因为购物应用，需要不停的有活动和购物节，发版要求很高。
因为本人也是小白，所以写的啰嗦一点。
从箭头入口，建立一个新项目。
这里小白按照facebook官网文档往下说，有兴趣的也可以去官网文档上看。
（1）可以参考RN生成的目录结构，把你的项目，先用android目录，放里面。
注意：这一步是个坑，如果不这样，可能就出现无法识别android项目错误。
（2）执行
$ npm init
$ npm install --save react react-native
$ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
上面这些命令，在你得命令行里面（前提你已经配好了开发环境，这个下一讲说一下）
（3）
这一步要填一些东西，名字必须是小写，其他随便填填
这一步 ，node环境就配好了
（4）修改一些参数
找到package.json 这个文件
“start”: “node node_modules/react-native/local-cli/cli.js start”
这个位置，可以参考RN生成的项目文件，位置
（5）写个js文件
'use strict';
import React from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class HelloWorld extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.hello}>Hello, World</Text>
</View>
)
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
hello: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);这都是官网给出的例子。index.android.js文件名，RN的第一个js文件，基本都是这。
（6）在你原生项目app里面 build.gradle这个文件里面加入
dependencies {
... compile "com.facebook.react:react-native:+" // From node_modules.
}这个位置相信大家很容易找到，我这小白都知道。
（7）在原生项目build.gradle这个文件里加
allprojects {
repositories { ... maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android" } } ... }（8）很重要一点，你的原生应用要加入网络权限
因为，RN的js文件是在服务器上，就跟搞web一样，有服务器的，不能联网，就用不了。
<uses-permission android:name="android.permission.INTERNET" />（9）在原生应用activity里面加，调用js代码（理解不一定准确）
这有点蛋疼，还是切回到android studio搞一下，这一步坑了，大家最好是先进行这一步，官网也挺坑。
package com.example.test.testhello;
import android.app.Activity;
import android.os.Bundle;
import com.facebook.react.LifecycleState;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;
public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler{
private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);
setContentView(mReactRootView);
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
}简单写写，官网上有些方法这里没写。
（10）剩下就是运行我们的RN项目了，然后看看有没有遇到什么坑
这里说一下编辑器工具，我RN用的是微软的VS code，本人觉得用着挺爽，前提是也没用其他的。
很激动，一次尝试就成功，编译通过，安装成功app，不过app运行崩溃了，肯定是遇到坑了，大概过程就是这样。
大家可以把遇到的坑，写在评论里，一起趟过去，祝大家好运。
