React Native混合开发1

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[/code] 
上面这些命令，在你得命令行里面（前提你已经配好了开发环境，这个下一讲说一下）

（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运行崩溃了，肯定是遇到坑了，大概过程就是这样。

大家可以把遇到的坑，写在评论里，一起趟过去，祝大家好运。