Android原生項目集成React Native的方法
開發(fā)環(huán)境準(zhǔn)備
首先按照開發(fā)環(huán)境搭建教程來安裝React Native在安卓平臺上所需的一切依賴軟件（比如npm）。
在應(yīng)用中添加JS代碼
在項目的根目錄中運行：
$ npm init $ npm install --save react react-native $ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
npm init創(chuàng)建了一個空的node模塊（其實就是創(chuàng)建了一個package.json描述文件），而npm install則創(chuàng)建了node_modules目錄并把react和react-native下載到了其中。至于第三步curl命令，其實質(zhì)是下載.flowconfig配置文件，這個文件用于約束js代碼的寫法。這一步非必需，可跳過。下面我們打開新創(chuàng)建的package.json文件，然后在其scripts字段中加入:
"start": "node node_modules/react-native/local-cli/cli.js start"
現(xiàn)在你的package.json內(nèi)容應(yīng)該類似這樣：
{
"name": "react-example",
"version": "1.0.0",
"description": "this is my first react example",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"keywords": [
"react",
"android",
"example"
],
"author": "max",
"license": "ISC",
"dependencies": {
"react": "^15.4.2",
"react-native": "^0.42.3"
}
}
接下來在項目根目錄中創(chuàng)建index.android.js文件，然后將下面的代碼復(fù)制粘貼進來：
'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('react-example', () => HelloWorld);
準(zhǔn)備工作
在你的app中 build.gradle 文件中添加 React Native 依賴:
dependencies {
...
compile "com.facebook.react:react-native:+" // From node_modules.
}
然后Sync的時候可能會有如下報錯（坑一）：
Error:Conflict with dependency 'com.google.code.findbugs:jsr305' in project ':app'. Resolved versions for app (3.0.0) and test app (2.0.1) differ. See http://g.co/androidstudio/app-test-app-conflict for details.
Google一下解決方案，我們需要在app的build.gradle中添加如下代碼：
android {
configurations.all {
resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
}
}
編譯完美通過！哈哈~
在項目的 build.gradle 文件中為 React Native 添加一個 maven 依賴的入口，必須寫在 “allprojects” 代碼塊中:
allprojects {
repositories {
...
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
}
...
}
正常情況下項目的build.gradle文件和node_modules目錄都是在根目錄下面，所以需要把
url "$rootDir/../node_modules/react-native/android" 改為 url "$rootDir/node_modules/react-native/android"
接著，在 AndroidManifest.xml 清單文件中聲明網(wǎng)絡(luò)權(quán)限:
<uses-permission android:name="android.permission.INTERNET" />
如果需要訪問 DevSettingsActivity 界面，也需要在 AndroidManifest.xml 中聲明:
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
添加原生代碼
想要通過原生代碼調(diào)用 React Native ，就像這樣，我們需要在一個 Activity 中創(chuàng)建一個 ReactRootView 對象，將它關(guān)聯(lián)一個 React application 并設(shè)為界面的主視圖。
如果你想在安卓5.0以下的系統(tǒng)上運行，請用 com.android.support:appcompat 包中的 AppCompatActivity 代替 Activity 。
public class MyReactActivity extends AppCompatActivity 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();
// 注意這里的react-example必須對應(yīng)“index.android.js”中的
// “AppRegistry.registerComponent()”的第一個參數(shù)
mReactRootView.startReactApplication(mReactInstanceManager, "react-example", null);
setContentView(mReactRootView);
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
@Override
protected void onPause() {
super.onPause();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostPause(this);
}
}
@Override
protected void onResume() {
super.onResume();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostResume(this, this);
}
}
@Override
protected void onDestroy() {
super.onDestroy();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostDestroy();
}
}
@Override
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}
@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
mReactInstanceManager.showDevOptionsDialog();
return true;
}
return super.onKeyUp(keyCode, event);
}
}
注意這里的react-example必須對應(yīng)“index.android.js”中的“AppRegistry.registerComponent()”的第一個參數(shù)，以及package.json中的name屬性保持一致
我們需要把 MyReactActivity 的主題設(shè)定為 Theme.AppCompat.Light.NoActionBar ，因為里面有許多組件都使用了這一主題。
<activity
android:name=".MyReactActivity"
android:label="@string/app_name"
android:theme="@style/Theme.AppCompat.Light.NoActionBar">
</activity>
配置權(quán)限以便開發(fā)中的紅屏錯誤能正確顯示
如果你的設(shè)備版本在23及以上，你需要確認(rèn)你的APP是否具有overlay permission
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
if (!Settings.canDrawOverlays(this)) {
Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
Uri.parse("package:" + getPackageName()));
startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
}
}
在onActivityResult中判斷是否獲得權(quán)限
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
if (!Settings.canDrawOverlays(this)) {
// SYSTEM_ALERT_WINDOW permission not granted...
}
}
}
}
運行你的應(yīng)用
運行應(yīng)用首先需要啟動開發(fā)服務(wù)器（Packager）。你只需在項目根目錄中執(zhí)行以下命令即可：
$ npm start
你可以把你的MyReactActivity作為launchActivity，直接啟動，或者從別的Activity跳轉(zhuǎn)過去都可以，現(xiàn)在你只需要run app,下面貼出我的MainActivity的代碼
public class MainActivity extends AppCompatActivity {
private static final int OVERLAY_PERMISSION_REQ_CODE = 0x1111;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
if (!Settings.canDrawOverlays(this)) {
Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
Uri.parse("package:" + getPackageName()));
startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
}
}
findViewById(R.id.text1).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(MainActivity.this, MyReactActivity.class);
startActivity(intent);
}
});
}
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
if (!Settings.canDrawOverlays(this)) {
// SYSTEM_ALERT_WINDOW permission not granted...
}
}
}
}
}
界面中只有一個TextView，點擊跳轉(zhuǎn)到MyReactActivity
真是個悲傷地故事，跳轉(zhuǎn)報錯了。
繼續(xù)Google大法尋求幫助：
我們需要在module中新建一個assets目錄，android studio為我們提供了非常方便的方式，一鍵搞定！
然后我們在根目錄的命令行執(zhí)行如下命令：
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --sourcemap-output app/src/main/assets/index.android.map --assets-dest app/src/main/res/
這是為了把react native的代碼打包到android的assets目錄中，命令執(zhí)行完畢之后，我們會發(fā)現(xiàn)assets目錄中多了三個文件，
這個就是我們react native的代碼打包之后的樣子，然后我們run app。
然后我們就會驚喜的發(fā)現(xiàn)APP成功運行起來啦！
但是
到這里并沒有結(jié)束，我們試著搖晃一下手機，開啟傳說中的debug設(shè)置對話框，但是好像并沒有反應(yīng)，難道是搖晃的力度不夠？我們使出吃奶的力氣搖晃手機，還是沒卵用~而且有的同學(xué)可能已經(jīng)發(fā)現(xiàn)了，我們剛才用的是官方的打包命令，才完成了app的顯示。也就是說我們現(xiàn)在用的是app內(nèi)部的代碼，而不是我們本地node服務(wù)上的代碼。
這個就是官方教程的一個坑，我們回到初始化activity的地方，修改一點點代碼。
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
// .setUseDeveloperSupport(BuildConfig.DEBUG) //開發(fā)者支持，BuildConfig.DEBUG的值默認(rèn)是false，無法使用開發(fā)者菜單
.setUseDeveloperSupport(true) //開發(fā)者支持,開發(fā)的時候要設(shè)置為true，不然無法使用開發(fā)者菜單
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
// 注意這里的react-example必須對應(yīng)“index.android.js”中的
// “AppRegistry.registerComponent()”的第一個參數(shù)
mReactRootView.startReactApplication(mReactInstanceManager, "peoplus", null);
setUseDeveloperSupport方法并沒有起作用，因為這個Config.DEBUG默認(rèn)值為false，所以這個地方我們手動寫成true。我們這個時候重新run一遍程序，發(fā)現(xiàn)非常完美。到此結(jié)束。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Android中APK簽名工具之jarsigner和apksigner詳解
這篇文章主要給大家介紹了關(guān)于Android中APK簽名工具之jarsigner和apksigner的相關(guān)資料，文中介紹的非常詳細(xì)，對各位Android開發(fā)者們具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-06-06
這篇文章主要介紹了Android Studio 中獲取屏幕寬度實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03
這篇文章主要介紹了Android基于SoftReference緩存圖片的方法,較為詳細(xì)的分析說明了SoftReference緩存圖片的原理并結(jié)合實例分析了具體的緩存操作實現(xiàn)技巧,需要的朋友可以參考下2016-08-08
Android使用MediaCodec將攝像頭采集的視頻編碼為h264
這篇文章主要為大家詳細(xì)介紹了Android使用MediaCodec將攝像頭采集的視頻編碼為h264，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
android實現(xiàn)始終顯示overflow菜單的方法
這篇文章主要介紹了android實現(xiàn)始終顯示overflow菜單的方法,需要的朋友可以參考下2014-07-07
這篇文章主要為大家詳細(xì)介紹了Android解析XML的三種方式：SAX、Pull、Dom，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要介紹了Android init.rc文件詳解及簡單實例的相關(guān)資料,需要的朋友可以參考下2017-01-01
JobScheduler是Android L版本新引入的API，JobScheduler，顧名思義，是用來調(diào)度工作。工作被調(diào)度的條件包括網(wǎng)絡(luò)變化，充電插拔，周期執(zhí)行等。谷歌為什么要引入這個新的API呢？是為了省電而制定的一種規(guī)范。下面跟著小編一起來看下吧2017-02-02
Android App中使用ViewPager實現(xiàn)滑動分頁的要點解析
這篇文章主要介紹了Android App中使用ViewPager實現(xiàn)滑動分頁的要點解析,還附帶了一個禁止ViewPager左右滑動的方法,需要的朋友可以參考下2016-06-06
本篇文章主要介紹了Android斷點下載和自動安裝的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01