Android原生集成RN最新版教程
更新時間：2022年12月21日 15:37:33 作者：wayne214
這篇文章主要為大家介紹了Android原生集成RN最新版教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
前言
現在不少應用都是采用了混合開發(fā)模式，不論是原生加RN,或是原生加Flutter,或是原生加H5。原生實現主業(yè)務線，其他部分可以借助跨平臺方案開發(fā)，提高開發(fā)效率，或者實現熱更新，調高業(yè)務迭代效率。
下面簡單介紹一下Android原生集成最新RN版本的過程。
添加package.json文件
首先在一個正常編譯運行的原生APP根目錄下執(zhí)行yarn init命令，按提示填寫基本信息后會在項目根目錄下，創(chuàng)建一個package.json文件。
添加JavaScript依賴,生成node_modules
然后，使用如下命令添加React和React Native運行環(huán)境的支持腳本。
yarn add react react-native
命令執(zhí)行完成后，所有JavaScript依賴模塊都會被安裝到項目根目錄下的node_modules/目錄中。
注意：node_modules這個目錄我們原則上不復制、不移動、不修改、不上傳，隨用隨裝，同時把node_modules/目錄記錄到.gitignore文件中（即不上傳到版本控制系統，只保留在本地）。
接下來，在package.json文件中配置啟動RN Metro服務的腳本，即script腳本，文件全部內容如下。 項目根目錄package.json文件
{
"name": "AndroidDemo",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"react": "^18.2.0",
"react-native": "^0.70.6"
},
"scripts": {
"start": "yarn react-native start"
}
}
原生端添加React Native依賴
在app中build.gradle文件中添加React Native和JSC引擎依賴:
dependencies {
...
implementation "com.facebook.react:react-native:+"
implementation "org.webkit:android-jsc:+"
}
在項目的build.gradle文件中為React Native和JSC引擎添加maven源的路徑，必須寫在 "allprojects" 代碼塊中。
allprojects {
repositories {
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
maven {
// Android JSC is installed from npm
url("$rootDir/../node_modules/jsc-android/dist")
}
}
}
?。?！注意這里有個問題，點擊同步后，會報如下錯誤：
Build was configured to prefer settings repositories over project repositories but repository 'maven' was added by build file 'build.gradle'
原因是gradle7.0后，以前位于根項目build.gradle文件中的代碼庫設置現在遷移到了settings.gradle文件中，根目錄build.gradle文件不做更改。 settings.gradle文件配置
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
google()
mavenCentral()
maven {
url "$rootDir/node_modules/react-native/android"
}
maven {
url("$rootDir/node_modules/jsc-android/dist")
}
}
}
相關說明：developer.android.com/studio/rele…
配置原生項目網絡權限及開發(fā)者菜單頁面
在原生AndroidManifest.xml文件進行添加，對應示例如下 如果需要訪問http請求，需要application中添加usesCleartextTraffic
// 網絡權限
<uses-permission android:name="android.permission.INTERNET" />
<application
android:allowBackup="true"
android:dataExtractionRules="@xml/data_extraction_rules"
android:fullBackupContent="@xml/backup_rules"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:usesCleartextTraffic="true" // 訪問http請求
android:theme="@style/Theme.AndroidStudy"
tools:targetApi="31">
<activity
android:name=".MainActivity"
android:exported="true">
<!-- <intent-filter>-->
<!-- <action android:name="android.intent.action.MAIN" />-->
<!-- <category android:name="android.intent.category.LAUNCHER" />-->
<!-- </intent-filter>-->
</activity>
<activity
android:name=".MyActivity"
android:theme="@style/Theme.AppCompat.Light.NoActionBar"
android:exported="true" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
//開發(fā)者調試菜單
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>
創(chuàng)建一個RN入口文件index.js
index.js是 React Native 應用在 Android 上的入口文件。而且它是不可或缺的！它可以是個很簡單的文件，簡單到可以只包含一行require/import導入語句，示例代碼如下。
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',
backgroundColor: '#f9c2ff',
},
hello: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color: 'red'
}
});
AppRegistry.registerComponent(
'MyReactNativeApp',
() => HelloWorld
);
創(chuàng)建一個頁面用來承載RN頁面
需要在一個Activity中創(chuàng)建一個ReactRootView對象，然后在這個對象之中啟動React Native應用，并將它設為界面的主視圖，這里創(chuàng)建了一個MyActivity頁面
import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.common.LifecycleState;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
public class MyActivity extends Activity implements DefaultHardwareBackBtnHandler {
private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
SoLoader.init(this, false);
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setCurrentActivity(this)
.setBundleAssetName("index.android.bundle")
.setJSMainModulePath("index")
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
// 注意這里的MyReactNativeApp 必須對應"index.js"中的
// "AppRegistry.registerComponent()"的第一個參數
mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);
setContentView(mReactRootView);
}
@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(this);
}
if (mReactRootView != null) {
mReactRootView.unmountReactApplication();
}
}
// 顯示開發(fā)調試菜單彈框
@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
mReactInstanceManager.showDevOptionsDialog();
return true;
}
return super.onKeyUp(keyCode, event);
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
// 后退按鈕事件傳遞給 React Native
@Override
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}
}
自此原生端集成RN完成。
測試集成效果。
首先，需要啟動開發(fā)服務器（Metro）。你只需在項目根目錄中執(zhí)行以下命令：
yarn start
然后，點擊Android Studio運行按鈕，正常運行項目即可。
加載完bundle文件之后，可以看到如下頁面了。
以上就是Android原生集成RN最新版教程的詳細內容，更多關于Android集成RN的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了Android手機通過藍牙連接佳博打印機的實例代碼,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-11-11
這篇文章主要為大家詳細介紹了TextView中URL等指定特殊字符串與點擊事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
性能優(yōu)化是一個大的范疇，如果有人問你在Android中如何做性能優(yōu)化的，也許都不知道從哪開始說起。那么這篇文章我們從布局優(yōu)化和內存優(yōu)化兩個方面來展開說如何進行Android的性能優(yōu)化。2016-08-08
這篇文章主要為大家詳細介紹了Android仿微信主界面的實現方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04
Android UI設計系列之ImageView實現ProgressBar旋轉效果（1）
這篇文章主要為大家詳細介紹了Android UI設計之ImageView實現ProgressBar旋轉效果，具有一定的實用性和參考價值，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章給大家介紹了android 自定義Button控件實現按鈕點擊變色的代碼，本文給大家附有注釋，非常不錯，代碼簡單易懂，對android按鈕點擊變色的實現感興趣的朋友參考下吧2016-11-11
Hilt?是?Android?的依賴項注入庫，可減少在項目中執(zhí)行手動依賴項注入的樣板代碼，本文就來為大家介紹一下Hilt的具體使用吧，希望對大家有所幫助2023-06-06
本篇文章主要介紹了Android Scroller的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
這篇文章主要介紹了Android本地存儲案例，方法簡單可以實現存儲并達到節(jié)省內存的效果，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-10-10
這篇文章主要為大家詳細介紹了Android實現旋轉動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01