原生Android集成React Native

概述使用ReactNative从零开始开发一款移动应用是一件很惬意的事情，但对于一些已经上线的产品，完全摒弃原有应用的历史沉淀，全面转向ReactNative是不现实的。因此，使用ReactNative去统一原生Android、iOS应用的技术栈，把它作为已有原生应用的扩展模块，是目前混合开发的最有效方式。首先，在 使用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项目即可看到如下图所示。

---

- END -

总结

以上是内存溢出为你收集整理的原生Android集成React Native全部内容，希望文章能够帮你解决原生Android集成React Native所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1005539.html