使用React Native從零開始開發(fā)一款移動(dòng)應(yīng)用是一件很愜意的事情，但對于一些已經(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ò)展模塊，是目前混合開發(fā)的最有效方式。
首先，在原生Android項(xiàng)目目錄下執(zhí)行以下命令創(chuàng)建一個(gè)package.json文件。
yarn init
然后，根據(jù)提示輸入對應(yīng)的配置信息。等待命令執(zhí)行完成之后，我們會(huì)發(fā)現(xiàn)Android項(xiàng)目的根目錄多了一個(gè)package.json文件。 接下來，使用如下命令添加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開發(fā)也運(yùn)行所需的依賴模塊，原則上這個(gè)目錄是不能復(fù)制、移動(dòng)和修改的。
接下來，使用文本編輯器打開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);
接下來，我們使用Android Studio打開原生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ì)有問題詳見
implementation("org.webkit:android-jsc:+")
}
如果不指定依賴的版本，那么默認(rèn)使用的是package.json文件中React Native對應(yīng)的版本。然后，在項(xiàng)目的build.gradle文件的allprojects代碼塊中添加React Native和JSC引擎的路徑，如下所示(千萬注意路徑)。
rn >= 0.63
rn 官方為大于 0.63?的所有主要版本都準(zhǔn)備了一個(gè)熱更新補(bǔ)丁，所以如果你的 react-native 版本大于 0.63，就直接根據(jù)上面這個(gè) issue 里找到對應(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")}
然后，打開AndroidManifest.xml清單文件，添加網(wǎng)絡(luò)權(quán)限代碼，如下所示。
<uses-permission android:name="android.permission.INTERNET" />
接下來，新建一個(gè)Activity作為React Native的容器頁面，并在Activity中創(chuàng)建一個(gè)ReactRootView對象，然后在這個(gè)對象之中啟動(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() {
}
}
完成上述操作后，我們在src/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
// 上述失敗? 可以嘗試絕對路徑?
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 名稱必須一致
