ReactNative学习中记录的笔记。
准备条件：
- 一个已有的、基于gradle构建的Android应用。
- Node.js,参见开始使用ReactNative了解相关的设置操作。
首先创建个Android工程，结构如下图所示：
下面我们开始在这个原生android工程上进行改造，加入我们的ReactNative代码。
在android/app/build.gradle文件中，添加React Native依赖：
// From node_modules
compile"com.facebook.react:react-native:+"然后在android/build.gradle文件中（注意跟上面的路径不同）加入本地React Native的maven目录(现在React Native的所有组件,无论JS还是Android的预编译包，都是通过npm分发的了):
allprojects {
repositories {
jcenter()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from nam
url "$rootDir/node_modules/react-native/android"
}
}
}
最后在你的AndroidManifest.xml里增加Internet访问权限：
<uses-permission android:name="android.permission.INTERNET" />
注意：配置过程中可能遇到的异常提示：
解决办法：
在grade文件中加入如下代码：
configurations.all { resolutionStrategy.force 'com.google.code.findbugs:jsr305:2.0.1' }
附上截图文件如下：
错误原因：
出现这个错误的原因是我引入的第三方库最低支持版本高于我的项目的最低支持版本，异常中的信息显示：我的项目的最低支持版本为15，而第三方库的最低支持版本为16，所以抛出了这个异常。
解决办法：
在AndroidManifest.xml文件中 标签中添加
<uses-sdk tools:overrideLibrary="xxx.xxx.xxx"/>，其中的xxx.xxx.xxx为第三方库包名，如果存在多个库有此异常，则用逗号分割它们，例如：<uses-sdk tools:overrideLibrary="xxx.xxx.aaa, xxx.xxx.bbb"/>，这样做是为了项目中的AndroidManifest.xml和第三方库的AndroidManifest.xml合并时可以忽略最低版本限制。
本次需要在Manifest.xml文件中加入权限：
<uses-sdk tools:overrideLibrary="com.facebook.react"/>
附上截图文件如下：
添加原生代码
你需要添加一些原生代码来启动React Native运行库以及让它渲染出东西来。我们接下来创建一个Activity和一ReactRootView，然后在里面启动一个React应用并把它设置为Activity的主要内容视图。
public class MainActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler{
private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//创建一个ReactRootView，把它设置成Activity的主视图
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")//设置模块的主入口的JS文件为index.android.js
.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();
}
}
接下来，我们需要传递一些Activity的生命周期事件到ReactInstanceManager
@Override
protected void onPause() {
super.onPause();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostPause();
}
}
@Override
protected void onResume() {
super.onResume();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostResume(this, this);
}
}
@Override
protected void onDestroy() {
super.onDestroy();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostDestroy();
}
}
我们还需要把Back按钮事件传递给React native：
@Override
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}
把JS代码添加到你的应用
在你的工程根目录，运行以下代码：
$ npm init
$ npm install --save react
$ npm install --save react-native
$ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
-
Terminal中输入npm init生成package.json文件
WeChat_1477107545.jpeg
打开生成的package.json 文件 （在项目根目录下面）添加scripts中的数据配置
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node node_modules/react-native/local-cli/cli.js start",
"bundle-android": "react-native bundle –platform android –dev false –entry-file index.android.js –bundle-output android/app/src/main/assets/index.android.bundle –sourcemap-output android/app/src/main/assets/index.android.map –assets-dest android/app/src/main/res/"
}
- 输入npm install --save react-native 命令 下载node_moudle
但是如果网络不好的话 下载起来比较慢 此时 只需要将原有的node_moudles 拷贝进来 扔在根目录 或者上级目录中即可 - 输入curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig 命令 生成 .flowconfig文件
以上配置完成之后，复制并粘贴下面的这段代码到你工程根目录下的index.android.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);
运行你的应用
npm start
