手把手教你原生Android集成React Native

使用React Native從零開(kāi)始開(kāi)發(fā)一款移動(dòng)應(yīng)用是一件很愜意的事情蝗敢,但對(duì)于一些已經(jīng)上線的產(chǎn)品滤馍,完全摒棄原有應(yīng)用的歷史沉淀,全面轉(zhuǎn)向React Native是不現(xiàn)實(shí)的床三。因此,使用React Native去統(tǒng)一原生Android涣楷、iOS應(yīng)用的技術(shù)棧分唾,把它作為已有原生應(yīng)用的擴(kuò)展模塊,是目前混合開(kāi)發(fā)的最有效方式狮斗。

首先绽乔,在原生Android項(xiàng)目目錄下執(zhí)行以下命令創(chuàng)建一個(gè)package.json文件。

yarn init

然后碳褒,根據(jù)提示輸入對(duì)應(yīng)的配置信息折砸。等待命令執(zhí)行完成之后,我們會(huì)發(fā)現(xiàn)Android項(xiàng)目的根目錄多了一個(gè)package.json文件沙峻。 接下來(lái)睦授,使用如下命令添加React和React Native運(yùn)行環(huán)境的支持腳本。

yarn add react react-native

執(zhí)行完命令后摔寨,會(huì)發(fā)現(xiàn)Android項(xiàng)目的根目錄下多了一個(gè)node_modules文件夾去枷,里面包含了React Native開(kāi)發(fā)也運(yùn)行所需的依賴模塊,原則上這個(gè)目錄是不能復(fù)制是复、移動(dòng)和修改的删顶。

接下來(lái),使用文本編輯器打開(kāi)package.json文件淑廊,配置React Native的啟動(dòng)腳本逗余,完整如下代碼。

{

"name": "AndroidDemo",

"version": "1.0.0",

"main": "index.js",

"license": "MIT",

"dependencies": {

"react": "^17.0.1",

"react-native": "^0.63.4"

},

"scripts": {

"start": "yarn react-native start" //React Native的啟動(dòng)腳本

}

}

然后季惩,在Android項(xiàng)目的根目錄下創(chuàng)建一個(gè)index.js文件录粱,該文件是React Native的入口文件,代碼如下画拾。






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, React Native</Text>

<Text style={styles.hello}>Hello, React Native</Text>

<Text style={styles.hello}>Hello, React Native</Text>

<Text style={styles.hello}>Hello, React Native</Text>

<Text style={styles.hello}>Hello, React Native</Text>

</View>

);

}

}

const styles = StyleSheet.create({

container: {

flex:1,

justifyContent:'center',

},

hello: {

fontSize:20,

textAlign:'center',

margin:10,

},

});

AppRegistry.registerComponent('MyApplicationReactNative', () => HelloWorld);

接下來(lái)啥繁,我們使用Android Studio打開(kāi)原生Android項(xiàng)目,并在app目錄的build.gradle文件的dependencies代碼塊中添加React Native和JSC引擎依賴青抛,如下所示输虱。

dependencies {??

...

implementation("com.facebook.react:react-native:0.70.5")?

//implementation("com.facebook.react:react-native:+")? ?會(huì)有問(wèn)題詳見(jiàn)

implementation("org.webkit:android-jsc:+")

}

如果不指定依賴的版本,那么默認(rèn)使用的是package.json文件中React Native對(duì)應(yīng)的版本脂凶。然后,在項(xiàng)目的build.gradle文件的allprojects代碼塊中添加React Native和JSC引擎的路徑愁茁,如下所示(千萬(wàn)注意路徑)蚕钦。

rn >= 0.63

rn 官方為大于 0.63?的所有主要版本都準(zhǔn)備了一個(gè)熱更新補(bǔ)丁,所以如果你的 react-native 版本大于 0.63鹅很,就直接根據(jù)上面這個(gè) issue 里找到對(duì)應(yīng)的補(bǔ)丁版本嘶居,更新 package.json 內(nèi)容,重新 yarn install,然后 cd android && ./gradlew clean 清理緩存邮屁,之后應(yīng)該就恢復(fù)正常了整袁。

package.json
settings.gradle.kts

mavenLocal()

maven{ url = uri("$rootDir/../MyApplicationReactNative/node_modules/react-native/android")}

maven{ url = uri("$rootDir/../MyApplicationReactNative/node_modules/jsc-android/dist")}

然后,打開(kāi)AndroidManifest.xml清單文件佑吝,添加網(wǎng)絡(luò)權(quán)限代碼坐昙,如下所示。

<uses-permission android:name="android.permission.INTERNET" />

接下來(lái)芋忿,新建一個(gè)Activity作為React Native的容器頁(yè)面炸客,并在Activity中創(chuàng)建一個(gè)ReactRootView對(duì)象,然后在這個(gè)對(duì)象之中啟動(dòng)React Native應(yīng)用代碼戈钢,如下所示痹仙。

public class MyReactActivityextends Activityimplements DefaultHardwareBackBtnHandler {

private ReactRootViewmReactRootView;

? ? private ReactInstanceManagermReactInstanceManager;

? ? @Override

? ? protected void onCreate(@Nullable 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();

? ? ? ? mReactRootView.startReactApplication(mReactInstanceManager, "MyApplicationReactNative", null);

? ? ? ? setContentView(mReactRootView);

? ? }

@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() {

}

}


完成上述操作后,我們?cè)趕rc/main目錄下創(chuàng)建一個(gè)assets資源文件夾殉了,然后執(zhí)行如下打包命令开仰。


react-native bundle --platform android --entry-file index.js --bundle-output app/src/main/assets/index.android.bundle --devfalse

// 上述失敗? 可以嘗試絕對(duì)路徑?

React-native bundle --platform android --dev false --entry-file index.js --bundle-output /Users/admin/AndroidStudioProjects/MyApplicationReactNative/app/src/main/assets/index.bundle --assets-dest /Users/admin/AndroidStudioProjects/MyApplicationReactNative/app/src/main/res/

接著,執(zhí)行yarn start命令啟動(dòng)React Native服務(wù)薪铜,重新運(yùn)行原生Android項(xiàng)目即可看到如下圖所示众弓。

運(yùn)行成功示例圖


?寫在最后: 一定注意?MyReactActivity 與 index.js 名稱必須一致

index.js



MyReactActivity
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市痕囱,隨后出現(xiàn)的幾起案子田轧,更是在濱河造成了極大的恐慌,老刑警劉巖鞍恢,帶你破解...
    沈念sama閱讀 212,816評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件傻粘,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡帮掉,警方通過(guò)查閱死者的電腦和手機(jī)弦悉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,729評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)蟆炊,“玉大人稽莉,你說(shuō)我怎么就攤上這事∩辏” “怎么了污秆?”我有些...
    開(kāi)封第一講書(shū)人閱讀 158,300評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)昧甘。 經(jīng)常有香客問(wèn)我良拼,道長(zhǎng),這世上最難降的妖魔是什么充边? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,780評(píng)論 1 285
  • 正文 為了忘掉前任庸推,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘贬媒。我一直安慰自己聋亡,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,890評(píng)論 6 385
  • 文/花漫 我一把揭開(kāi)白布际乘。 她就那樣靜靜地躺著坡倔,像睡著了一般。 火紅的嫁衣襯著肌膚如雪蚓庭。 梳的紋絲不亂的頭發(fā)上致讥,一...
    開(kāi)封第一講書(shū)人閱讀 50,084評(píng)論 1 291
  • 那天,我揣著相機(jī)與錄音器赞,去河邊找鬼垢袱。 笑死,一個(gè)胖子當(dāng)著我的面吹牛港柜,可吹牛的內(nèi)容都是我干的请契。 我是一名探鬼主播,決...
    沈念sama閱讀 39,151評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼夏醉,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼爽锥!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起畔柔,我...
    開(kāi)封第一講書(shū)人閱讀 37,912評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤氯夷,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后靶擦,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體腮考,經(jīng)...
    沈念sama閱讀 44,355評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,666評(píng)論 2 327
  • 正文 我和宋清朗相戀三年玄捕,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了踩蔚。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,809評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡枚粘,死狀恐怖馅闽,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情馍迄,我是刑警寧澤福也,帶...
    沈念sama閱讀 34,504評(píng)論 4 334
  • 正文 年R本政府宣布,位于F島的核電站攀圈,受9級(jí)特大地震影響拟杉,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜量承,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,150評(píng)論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧撕捍,春花似錦拿穴、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,882評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至狮腿,卻和暖如春腿宰,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背缘厢。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,121評(píng)論 1 267
  • 我被黑心中介騙來(lái)泰國(guó)打工吃度, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人贴硫。 一個(gè)月前我還...
    沈念sama閱讀 46,628評(píng)論 2 362
  • 正文 我出身青樓椿每,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親英遭。 傳聞我的和親對(duì)象是個(gè)殘疾皇子间护,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,724評(píng)論 2 351

推薦閱讀更多精彩內(nèi)容