Android原生集成RN最新版教程
前言
現(xiàn)在不少應(yīng)用都是采用了混合開發(fā)模式,不論是原生加RN,或是原生加Flutter,或是原生加H5。原生實(shí)現(xiàn)主業(yè)務(wù)線,其他部分可以借助跨平臺(tái)方案開發(fā),提高開發(fā)效率,或者實(shí)現(xiàn)熱更新,調(diào)高業(yè)務(wù)迭代效率。
下面簡(jiǎn)單介紹一下Android原生集成最新RN版本的過(guò)程。
添加package.json文件
首先在一個(gè)正常編譯運(yùn)行的原生APP根目錄下執(zhí)行yarn init
命令,按提示填寫基本信息后會(huì)在項(xiàng)目根目錄下,創(chuàng)建一個(gè)package.json文件。
添加JavaScript依賴,生成node_modules
然后,使用如下命令添加React和React Native運(yùn)行環(huán)境的支持腳本。
yarn add react react-native
命令執(zhí)行完成后,所有JavaScript依賴模塊都會(huì)被安裝到項(xiàng)目根目錄下的node_modules/目錄中。
注意:node_modules這個(gè)目錄我們?cè)瓌t上不復(fù)制、不移動(dòng)、不修改、不上傳,隨用隨裝,同時(shí)把node_modules/目錄記錄到.gitignore文件中(即不上傳到版本控制系統(tǒng),只保留在本地)。
接下來(lái),在package.json文件中配置啟動(dòng)RN Metro服務(wù)的腳本,即script腳本,文件全部?jī)?nèi)容如下。 項(xiàng)目根目錄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:+" }
在項(xiàng)目的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") } } }
!??!注意這里有個(gè)問(wèn)題,點(diǎn)擊同步后,會(huì)報(bào)如下錯(cuò)誤:
Build was configured to prefer settings repositories over project repositories but repository 'maven' was added by build file 'build.gradle'
原因是gradle7.0后,以前位于根項(xiàng)目build.gradle文件中的代碼庫(kù)設(shè)置現(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)說(shuō)明:developer.android.com/studio/rele…
配置原生項(xiàng)目網(wǎng)絡(luò)權(quán)限及開發(fā)者菜單頁(yè)面
在原生AndroidManifest.xml文件進(jìn)行添加,對(duì)應(yīng)示例如下 如果需要訪問(wèn)http請(qǐng)求,需要application中添加usesCleartextTraffic
// 網(wǎng)絡(luò)權(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" // 訪問(wèn)http請(qǐng)求 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)建一個(gè)RN入口文件index.js
index.js是 React Native 應(yīng)用在 Android 上的入口文件。而且它是不可或缺的!它可以是個(gè)很簡(jiǎn)單的文件,簡(jiǎn)單到可以只包含一行require/import導(dǎo)入語(yǔ)句,示例代碼如下。
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)建一個(gè)頁(yè)面用來(lái)承載RN頁(yè)面
需要在一個(gè)Activity中創(chuàng)建一個(gè)ReactRootView對(duì)象,然后在這個(gè)對(duì)象之中啟動(dòng)React Native應(yīng)用,并將它設(shè)為界面的主視圖,這里創(chuàng)建了一個(gè)MyActivity頁(yè)面
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 必須對(duì)應(yīng)"index.js"中的 // "AppRegistry.registerComponent()"的第一個(gè)參數(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完成。
測(cè)試集成效果。
首先,需要啟動(dòng)開發(fā)服務(wù)器(Metro)。你只需在項(xiàng)目根目錄中執(zhí)行以下命令:
yarn start
然后,點(diǎn)擊Android Studio運(yùn)行按鈕,正常運(yùn)行項(xiàng)目即可。
加載完bundle文件之后,可以看到如下頁(yè)面了。
以上就是Android原生集成RN最新版教程的詳細(xì)內(nèi)容,更多關(guān)于Android集成RN的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Android手機(jī)通過(guò)藍(lán)牙連接佳博打印機(jī)的實(shí)例代碼
這篇文章主要介紹了Android手機(jī)通過(guò)藍(lán)牙連接佳博打印機(jī)的實(shí)例代碼,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11TextView中URL等指定特殊字符串與點(diǎn)擊事件解析
這篇文章主要為大家詳細(xì)介紹了TextView中URL等指定特殊字符串與點(diǎn)擊事件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11Android UI設(shè)計(jì)系列之ImageView實(shí)現(xiàn)ProgressBar旋轉(zhuǎn)效果(1)
這篇文章主要為大家詳細(xì)介紹了Android UI設(shè)計(jì)之ImageView實(shí)現(xiàn)ProgressBar旋轉(zhuǎn)效果,具有一定的實(shí)用性和參考價(jià)值,感興趣的小伙伴們可以參考一下2016-06-06Android 自定義Button控件實(shí)現(xiàn)按鈕點(diǎn)擊變色
這篇文章給大家介紹了android 自定義Button控件實(shí)現(xiàn)按鈕點(diǎn)擊變色的代碼,本文給大家附有注釋,非常不錯(cuò),代碼簡(jiǎn)單易懂,對(duì)android按鈕點(diǎn)擊變色的實(shí)現(xiàn)感興趣的朋友參考下吧2016-11-11Android實(shí)現(xiàn)旋轉(zhuǎn)動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)旋轉(zhuǎn)動(dòng)畫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01