1.在原有 Android 項(xiàng)目中嵌入 ReactNative 模塊
ReactNative的發(fā)展已經(jīng)進(jìn)入了很多開發(fā)者視野熬甚，作為一名原生開發(fā)者更是對(duì) RN 充滿了無限的好奇和期待,
本節(jié)將詳細(xì)講述如何將一個(gè)原生的 Android App 項(xiàng)目嵌入最新的 RN 模塊
1. 準(zhǔn)備開始
1. 一個(gè)已有的 Android 原生項(xiàng)目
2. 已經(jīng)配置好的原生 Android 開發(fā)環(huán)境和 node.js已經(jīng) RN 環(huán)境
3. 改造之后的流程圖
圖片
2.開始改造
- 在原生 Android 項(xiàng)目的在app/build.gradle文件中，添加React Native依賴：
compile"com.facebook.react:react-native:+
- 加入.so 庫(kù)
ndk {
abiFilters "armeabi-v7a", "x86"
}
- 在工程目錄下找到工程的 build.gradle文件中帮碰，添加 maven依賴
allprojects {
repositories {
jcenter()
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/node_modules/react-native/android"
}
}
}
3. 在 app 目錄里添加需要的權(quán)限
<uses-permission android:name="android.permission.INTERNET"/>
/**設(shè)置調(diào)試 的權(quán)限**/
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
4.添加 FaceBook 的 ReactNative 調(diào)試的 activity
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
2. 編寫原生的 ReactNative 模塊 干签，廢話不多說，直接上代碼
package com.allen.reactapp;
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;
/**
* 作者: allen on 16/7/31.
*/
public class MyReactActivity 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())
/**
* http://stackoverflow.com/questions/37951246/react-native-cannot-find-development-server-integrating-existing-android-app
* 調(diào)試模式下,建議直接寫成 true 吧,我就因?yàn)檫@個(gè)錯(cuò)誤,調(diào)了兩天原因
*/
// .setUseDeveloperSupport(BuildConfig.DEBUG)
.setUseDeveloperSupport(true)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "myreactactivity", null);
setContentView(mReactRootView);
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
@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
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}
}
到此為止我們的Android項(xiàng)目Activity和配置文件以及完成了最基本的配置方法了。
========================================================================
========================================================================
3. 下面配置工程項(xiàng)目的 RN開發(fā)環(huán)境
1. 先后順序依次執(zhí)行一下命令
$ npm init
該命令會(huì)創(chuàng)建一個(gè)package.json文件美澳，并且提示我們輸入一些信息，默認(rèn)不輸入即可摸航，不過name必須要為全英文小寫哦制跟，
然后再依次去執(zhí)行以下命令
$ npm install --save react
$ npm install --save react-native
$ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
創(chuàng)建完成后，去工程目錄下修改 package.json
在scripts標(biāo)簽?zāi)沁吿砑尤缦麓a:
"start":"node_modules/react-native/packager/packager.sh"
package_json
3. 工程目錄下創(chuàng)建 index.android.js 由于是測(cè)試代碼直接 Copy FaceBook 的源碼
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class AwesomeProject extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
我是 原生項(xiàng)目嵌入的 ReactNative
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('myreactactivity', () => AwesomeProject);
注意：此處需要修改注冊(cè)的入口 保持一致酱虎，我的是 my_react_activity
4.檢查以上所有步驟雨膨，有無遺漏，如果正常读串，接下來就可以順利的運(yùn)行你的混合 APP 了聊记，如果還不行，你需要檢查你的姿勢(shì)是否正確恢暖？
運(yùn)行你的 APP
1. 在項(xiàng)目的工程路徑運(yùn)行以下命令來啟動(dòng)你的開發(fā)服務(wù)器
react-native start
或者執(zhí)行
npm start
2. android studio 調(diào)試你的 APP
3. 演示效果圖
錯(cuò)誤解決：
Process: com.allen.reactapp, PID: 20469
java.lang.RuntimeException: java.util.concurrent.ExecutionException: java.lang.RuntimeException: Could not connect to development server.
Try the following to fix the issue:
Ensure that the packager server is running
Ensure that your device/emulator is connected to your machine and has USB debugging enabled - run 'adb devices' to see a list of connected devices
If you're on a physical device connected to the same machine, run 'adb reverse tcp:8081 tcp:8081' to forward requests from your device
If your device is on the same Wi-Fi network, set 'Debug server host & port for device' in 'Dev settings' to y
at com.facebook.react.ReactInstanceManagerImpl.createReactContext(ReactInstanceManagerImpl.java:911)
at com.facebook.react.ReactInstanceManagerImpl.access$700(ReactInstanceManagerImpl.java:100)
at com.facebook.react.ReactInstanceManagerImpl$ReactContextInitAsyncTask.doInBackground(ReactInstanceManagerImpl.java:197)
at com.facebook.react.ReactInstanceManagerImpl$ReactContextInitAsyncTask.doInBackground(ReactInstanceManagerImpl.java:180)
at android.os.AsyncTask$2.call(AsyncTask.java:295)
at java.util.concurrent.FutureTask.run(FutureTask.java:237)
at android.os.AsyncTask$SerialExecutor$1.run(AsyncTask.java:234)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1113)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:588)
at java.lang.Thread.run(Thread.java:818)
Caused by: java.util.concurrent.ExecutionException: java.lang.RuntimeException: Could not connect to development server.
Try the following to fix the issue:
Ensure that the packager server is running
Ensure that your device/emulator is connected to your machine and has USB debugging enabled - run 'adb devices' to see a list of connected devices
If you're on a physical device connected to the same machine, run 'adb reverse tcp:8081 tcp:8081' to forward requests from your device
If your device is on the same Wi-Fi network, set 'Debug server host & port for device' in 'Dev settings' to y
at com.facebook.react.common.futures.SimpleSettableFuture.get(SimpleSettableFuture.java:68)
at com.facebook.react.ReactInstanceManagerImpl.createReactContext(ReactInstanceManagerImpl.java:882)
... 9 more
Caused by: java.lang.RuntimeException: Could not connect to development server.
Try the following to fix the issue:
Ensure that the packager server is running
Ensure that your device/emulator is connected to your machine and has USB debugging enabled - run 'adb devices' to see a list of connected devices
解決辦法：
.setUseDeveloperSupport(true) 調(diào)試模式下,建議直接寫成 true 吧,
簽名打包混合 APP
1. 將 js 文件存入 bundle 一起打包
執(zhí)行命令：
curl -k "http://localhost:8081/index.android.bundle"> reactapp/src/main/assets/index.android.bundle
執(zhí)行完命令成功排监，在 assets目錄應(yīng)該看到 index.android.bundle文件
Android studio 執(zhí)行打包過程，作為一名 Android 老司機(jī)我就不再具體描述了
