ReactNative——集成RN到原生应用

前端之家收集整理的这篇文章主要介绍了ReactNative——集成RN到原生应用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

参考资料:


Android现有工程接入RN开发

嵌入到现有原生应用 - React Native 中文网
原生模块 - React Native 中文网


现有项目接入RN简单来说分以下步骤

1.首先要有一个现成的Android 工程。

2. 安装 react-native组件。

3.在原生app 中初始化 rn 组件部分。

4.编译、运行调试程序。


下面详细步骤:


开发环境准备


首先按照开发环境搭建教程来安装React Native在安卓平台上所需的一切依赖软件(比如npm)。

安装JavaScript依赖包

在项目根目录下创建一个名为package.json的空文本文件,然后填入以下内容

{
  "name": "your project name","version": "0.0.1","private": true,"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },"dependencies": {
    "react": "16.0.0-alpha.6","react-native": "0.44.3"
  }
}

一般来说我们推荐使用最新版本。你可以使用npm info react和npm info react-native来查看当前的最新版本。另外,react-native对react的版本有严格要求,高于或低于某个范围都不可以。本文无法在这里列出所有react native和对应的react版本要求,只能提醒读者先尝试执行npm install,然后注意观察安装过程中的报错信息,例如require react@某.某.某版本,but none was installed,然后根据这样的提示,执行npm i -S react@某.某.某版本。如果你使用多个第三方依赖,可能这些第三方各自要求的react版本有所冲突,此时应优先满足react-native所需要的react版本。其他第三方能用则用,不能用则只能考虑选择其他库。


接下来我们使用npm来安装React和React Native模块。
打开一个终端/命令提示行,进入到项目目录中(即包含有package.json文件的目录),然后运行下列命令来安装:


$ npm install

把React Native添加到你的应用中

配置maven

在你的app中 build.gradle 文件添加 React Native 依赖:


dependencies {
     ...
     compile "com.facebook.react:react-native:+" // From node_modules.
 }


在项目的 build.gradle 文件中为 React Native 添加一个 maven 依赖的入口,必须写在 "allprojects" 代码块中:


allprojects {
    repositories {
        ...
        maven {
            // All of React Native (JS,Android binaries) is installed from npm
            url "$rootDir/node_modules/react-native/android"
        }
    }
    ...
}

配置权限

接着,在 AndroidManifest.xml 清单文件中声明网络权限:


<uses-permission android:name="android.permission.INTERNET" />
<activity android:"com.facebook.react.devsupport.DevSettingsActivity" />
开发者菜单一般仅用于在开发时从Packager服务器刷新JavaScript代码,所以在正式发布时你可以去掉这一权限。


代码集成

React Native组件

我们首先要写的是"High score"(得分排行榜)的JavaScript端的代码


创建一个index.android.js文件

首先在项目根目录中创建一个空的index.android.js文件

index.android.js是React Native应用在Android上的入口文件。而且它是不可或缺的!它可以是个很简单的文件,简单到可以只包含一行require/import导入语句。本教程中为了简单示范,把全部的代码都写到了index.android.js里(当然实际开发中我们并不推荐这样做)。

添加你自己的React Native代码

在index.android.js中添加你自己的组件。这里我们只是简单的添加一个<Text>组件,然后用一个带有样式的<View>组件把它包起来。


'use strict';

import React from 'react';
import {
  AppRegistry,StyleSheet,Text,View
} 'react-native';

class HelloWorld extends React.Component {
  render() {
    return (
      <View style={styles.container}> <Text style={styles.hello}>Hello,World</Text> </View>
    )
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,justifyContent: 'center',},hello: {
    fontSize: 20,textAlign: Box-sizing: border-Box; color: rgb(163,margin: 10,});

AppRegistry.registerComponent('MyReactNativeApp',() => HelloWorld);


配置权限以便开发中的红屏错误能正确显示

如果你的应用会运行在Android 6.0(API level 23)或更高版本,请确保你在开发版本中有打开悬浮窗(overlay)权限。


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) {
            this)) {
                // SYSTEM_ALERT_WINDOW permission not granted...
            }
        }
    }
}


掌握核心科技:ReactRootView


我们还需要添加一些原生代码来启动React Native的运行时环境并让它开始渲染。首先需要在一个Activity中创建一个ReactRootView对象,然后在这个对象之中启动React Native应用,并将它设为界面的主视图。

如果你想在安卓5.0以下的系统上运行,请用 com.android.support:appcompat 包中的 AppCompatActivity 代替 Activity 。


public MyReactActivity Activity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();

        // 注意这里的MyReactNativeApp必须对应“index.android.js”中的
        // “AppRegistry.registerComponent()”的第一个参数
        mReactRootView.startReactApplication(mReactInstanceManager,"MyReactNativeApp",255);">null);  

        setContentView(mReactRootView);
    }

    public invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
}

如果你使用的是 Android Studio,可以使用Alt + Enter快捷键来自动为MyReactActivity类补上缺失的import语句。注意BuildConfig应该是在你自己的包中自动生成,无需额外引入。千万不要从com.facebook...的包中引入!



我们需要把 MyReactActivity 的主题设定为 Theme.AppCompat.Light.NoActionBar ,因为里面有许多组件都使用了这一主题

<activity android:name=".MyReactActivity" android:label="@string/app_name" android:theme="@style/Theme.AppCompat.Light.NoActionBar">
 </activity>
一个 ReactInstanceManager 可以在多个activities或fragments间共享。 You will want to make your own ReactFragment or ReactActivity and have a singleton holder that holds a . When you need the (e.g.,to hook up the to the lifecycle of those Activities or Fragments) use the one provided by the singleton.

下一步我们需要把一些activity的生命周期回调传递给ReactInstanceManager:


onPause() {
    super.onPause();

    if (mReactInstanceManager != null) {
        mReactInstanceManager.onHostPause(this);
    }
}

onResume() {
    super.onResume();

    null) {
        mReactInstanceManager.onHostResume(this,21);">onDestroy() {
    super.onDestroy();

    null) {
        mReactInstanceManager.onHostDestroy();
    }
}
我们还需要把后退按钮事件传递给React Native:
@Override
 onBackPressed() {
    null) {
        mReactInstanceManager.onBackPressed();
    } else {
        super.onBackPressed();
    }
}
boolean onKeyUp(int keyCode,KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
        mReactInstanceManager.showDevOptionsDialog();
        return true;
    }
    super.onKeyUp(keyCode,event);
}

测试集成结果

1. 运行Packager

运行应用首先需要启动开发服务器(Packager)。你只需在项目根目录中执行以下命令即可:

$ npm start

2. 运行你的应用

保持packager的窗口运行不要关闭,然后像往常一样编译运行你的Android应用(在命令行中执行./gradlew installDebug或是在Android Studio中编译运行)。

编译执行一切顺利进行之后,在进入到MyReactActivity时应该就能立刻从packager中读取JavaScript代码并执行和显示

在Android Studio中打包
你也可以使用Android Studio来打release包!其步骤基本和原生应用一样,只是在每次编译打包之前需要先执行js文件的打包(即生成离线的jsbundle文件)。具体的js打包命令如下:

$ react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
注意把上述命令中的路径替换为你实际项目的路径。如果assets目录不存在,则需要提前自己创建一个。

然后在Android Studio中正常生成release版本即可!




不论大神还是新手,欢迎加QQ群一起讨论问题学习技术:230274309
原文链接:https://www.f2er.com/react/303089.html

猜你在找的React相关文章