使用React Native从零开始开发一款移动应用是一件很惬意的事情，但对于一些已经上线的产品，完全摒弃原有应用的历史沉淀，全面转向React Native是不现实的。因此，使用React Native去统一原生Android、iOS应用的技术栈，把它作为已有原生应用的扩展模块，是目前混合开发的最有效方式。
首先，在原生Android项目目录下执行以下命令创建一个package.json文件。
yarn init
然后，根据提示输入对应的配置信息。等待命令执行完成之后，我们会发现Android项目的根目录多了一个package.json文件。 接下来，使用如下命令添加React和React Native运行环境的支持脚本。
yarn add react react-native
执行完命令后，会发现Android项目的根目录下多了一个node_modules文件夹，里面包含了React Native开发也运行所需的依赖模块，原则上这个目录是不能复制、移动和修改的。
接下来，使用文本编辑器打开package.json文件，配置React Native的启动脚本，完整如下代码。
{
"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的启动脚本
}
}
然后，在Android项目的根目录下创建一个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项目，并在app目录的build.gradle文件的dependencies代码块中添加React Native和JSC引擎依赖，如下所示。
dependencies {
...
implementation("com.facebook.react:react-native:0.70.5")
//implementation("com.facebook.react:react-native:+") 会有问题详见
implementation("org.webkit:android-jsc:+")
}
如果不指定依赖的版本，那么默认使用的是package.json文件中React Native对应的版本。然后，在项目的build.gradle文件的allprojects代码块中添加React Native和JSC引擎的路径，如下所示(千万注意路径)。
rn >= 0.63
rn 官方为大于 0.63 的所有主要版本都准备了一个热更新补丁，所以如果你的 react-native 版本大于 0.63，就直接根据上面这个 issue 里找到对应的补丁版本，更新 package.json 内容，重新 yarn install，然后 cd android && ./gradlew clean 清理缓存，之后应该就恢复正常了。
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")}
然后，打开AndroidManifest.xml清单文件，添加网络权限代码，如下所示。
<uses-permission android:name="android.permission.INTERNET" />
接下来，新建一个Activity作为React Native的容器页面，并在Activity中创建一个ReactRootView对象，然后在这个对象之中启动React Native应用代码，如下所示。
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目录下创建一个assets资源文件夹，然后执行如下打包命令。
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/
接着，执行yarn start命令启动React Native服务，重新运行原生Android项目即可看到如下图所示。
运行成功示例图
写在最后： 一定注意 MyReactActivity 与 index.js 名称必须一致
index.js
MyReactActivity
网友评论