使用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ù)正常了整袁。
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)目即可看到如下圖所示众弓。
?寫在最后: 一定注意?MyReactActivity 與 index.js 名稱必須一致