Android原生集成RN最新版教程
前言
現(xiàn)在不少應用都是采用了混合開發(fā)模式,不論是原生加RN,或是原生加Flutter,或是原生加H5。原生實現(xiàn)主業(yè)務線,其他部分可以借助跨平臺方案開發(fā),提高開發(fā)效率,或者實現(xiàn)熱更新,調(diào)高業(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文件中(即不上傳到版本控制系統(tǒng),只保留在本地)。
接下來,在package.json文件中配置啟動RN Metro服務的腳本,即script腳本,文件全部內(nèi)容如下。 項目根目錄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文件中的代碼庫設置現(xiàn)在遷移到了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") } } }
相關(guān)說明:developer.android.com/studio/rele…
配置原生項目網(wǎng)絡權(quán)限及開發(fā)者菜單頁面
在原生AndroidManifest.xml文件進行添加,對應示例如下 如果需要訪問http請求,需要application中添加usesCleartextTraffic
// 網(wǎng)絡權(quán)限 <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ā)者調(diào)試菜單 <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()"的第一個參數(shù) 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ā)調(diào)試菜單彈框 @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最新版教程的詳細內(nèi)容,更多關(guān)于Android集成RN的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Android UI設計系列之ImageView實現(xiàn)ProgressBar旋轉(zhuǎn)效果(1)
這篇文章主要為大家詳細介紹了Android UI設計之ImageView實現(xiàn)ProgressBar旋轉(zhuǎn)效果,具有一定的實用性和參考價值,感興趣的小伙伴們可以參考一下2016-06-06Android 自定義Button控件實現(xiàn)按鈕點擊變色
這篇文章給大家介紹了android 自定義Button控件實現(xiàn)按鈕點擊變色的代碼,本文給大家附有注釋,非常不錯,代碼簡單易懂,對android按鈕點擊變色的實現(xiàn)感興趣的朋友參考下吧2016-11-11