应用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的启动脚本，如下代码。
"scripts": { "start": "yarn react-native start", },此时，package.json文件的残缺内容如下所示。
{ "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" }}而后，在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> </View> ); }}const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', }, hello: { fontSize: 20, textAlign: 'center', margin: 10, },});AppRegistry.registerComponent('MyReactNativeApp', () => HelloWorld);接下来，咱们应用Android Studio关上原生Android我的项目，并在app目录的build.gradle文件的dependencies代码块中增加React Native和JSC引擎依赖，如下所示。
dependencies { ... implementation "com.facebook.react:react-native:+" implementation "org.webkit:android-jsc:+"}如果不指定依赖的版本，那么默认应用的是package.json文件中React Native对应的版本。而后，在我的项目的build.gradle文件的allprojects代码块中增加React Native和JSC引擎的门路，如下所示。
allprojects { repositories { maven { url "$rootDir/../node_modules/react-native/android" } maven { url("$rootDir/../node_modules/jsc-android/dist") } ... } ...}而后，关上AndroidManifest.xml清单文件，增加网络权限代码，如下所示。
<uses-permission android:name="android.permission.INTERNET" />如果须要拜访开发者调试菜单，还须要在AndroidManifest.xml清单文件中注册DevSettingsActivity界面，如下所示。
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />接下来，新建一个Activity作为React Native的容器页面，并在Activity中创立一个ReactRootView对象，而后在这个对象之中启动React Native利用代码，如下所示。
public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler { private ReactRootView mReactRootView;private ReactInstanceManager mReactInstanceManager; @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, "MyReactNativeApp", 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); }}能够应用Android Studio的【Alt + Enter】快捷键主动导入缺失的语句，并且BuildConfig是编译时主动生成的，无需额定引入。
因为React Native利用调试还须要悬浮窗权限，所以在须要在Android我的项目的代码中增加悬浮窗权限逻辑，如下所示。
private final int OVERLAY_PERMISSION_REQ_CODE = 1; private void requestPermission() { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { if (!Settings.canDrawOverlays(this)) { Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION, Uri.parse("package:" + getPackageName())); startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE); } }}@Overrideprotected void onActivityResult(int requestCode, int resultCode, Intent data) { if (requestCode == OVERLAY_PERMISSION_REQ_CODE) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { if (!Settings.canDrawOverlays(this)) { // SYSTEM_ALERT_WINDOW permission not granted } } } mReactInstanceManager.onActivityResult( this, requestCode, resultCode, data );}接下来，咱们在AndroidManifest.xml清单文件中注册MyReactActivity，此处咱们间接应用MyReactActivity替换MainActivity作为利用的主页面，如下所示。
<activity android:name=".MyReactActivity" android:theme="@style/Theme.AppCompat.Light.NoActionBar"><intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter></activity>实现上述操作后，咱们在src/main目录下创立一个assets资源文件夹，而后执行如下打包命令。
react-native bundle --platform android --entry-file index.js --bundle-output app/src/main/assets/index.android.bundle --dev false接着，执行yarn start命令启动React Native服务，从新运行原生Android我的项目即可看到如下图所示。