乐趣区

关于ios:原生Android集成React-Native

jiezi

应用 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);
            }
        }
}

@Override
protected 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 我的项目即可看到如下图所示。

退出移动版