Android之原生项目集成React Native

原创 2016年07月22日 00:15:08

      上节我们简单讲解在一个用React Native(RN)创建的项目中如果引用安卓原生的控件,这节简单介绍下,在一个已存在的安卓原生应用中如何集成开发RN,如今的产品几乎都是原生所写,今后的开发方向肯定大多会去集成RN或者别的框架而并非推到重来,所以这块的内容也是开发必须要掌握的知识。

      下面就简单介绍下集成的步骤:

       1.首先创建一个空的文件夹(android-with-react),然后把现有的安卓项目丢进去,注意:要将丢进去的项目文件夹改成android.否则执行可能报错.

   2.在android/app/build.gradle中引入RN所需要的依赖包.
compile "com.facebook.react:react-native:+"  // From node_modules
   3.android/build.gradle文件中(注意跟上面的路径不同)加入本地React Native的maven目录(现在React Native的所有组件,无论JS还是Android的预编译包,都是通过npm分发的了):
allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}
       4.添加RN相关支持库,用于开发RN代码:

在你的工程根目录,运行以下代码:

$ npm init

$ npm install --save react

$ npm install --save react-native

$ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

这种会比较慢,这里提供一个比较快捷的方法,用RN方式快速构建一个空的项目,将内部的package.json和node_modules文件拷贝到自己的项目根目录下.(参考下RN创建项目的目录结构) 

接着在你android studio开发工具中clean下项目获取RN的支持库:


       5.让你的Activity与RN的界面进行绑定:

package react.plus.com.android_react;

import com.facebook.react.ReactActivity;

/**
 * Created by plus on 16/7/20.
 * 这里用RN来渲染
 */
public class SettingActivity extends ReactActivity {

    @Override
    protected String getMainComponentName() {
        return "SettingActivity";
    }
}

很简单,不过要确保getMainComponentName返回的和RN中你要注册组件的名称一致
AppRegistry.registerComponent('SettingActivity', () => AwesomeProject);

最后RN的代码这里就不做展示了,详情可以看源码参考.


如果你用android studio跑项目的话,先开启packager服务(npm start),然后在run app,或者用命令行执行,这里建议用studio跑,因为遇到问题的可能性很大,这样你可以根据log排查原因.


下面提一下遇到的问题.   

Caused by: java.lang.UnsatisfiedLinkError: could find DSO to load: libreactnativejni.so
这里我们需要稍微配置一下build.gradle:
defaultConfig {
        applicationId "react.plus.com.android_react"
        minSdkVersion 22
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }

    packagingOptions {
        exclude "lib/arm64-v8a/librealm-jni.so"
    }



下面我们简单看下效果:(第一张图为原生应用,点击设置调转到第二图为RN).

       

这里要说一点,官方API中的BackAndroid中的exitApp方法指的不是退出整个App,而是退出当前Activity.也好理解,RN做的所有页面,其实就好比是基于Activity显示一堆的View.

不过这里又冒出新的问题,在原生应用调转到RN页面的时候,会出现大概1s的白屏现象.

解决方法:把创建ReactRootView以及获取jsbundle的操作放入到Native代码中,比如放置到启动页或者跳转到RN界面的前一个页面等等.总之保证打开的时候已经缓存OK






已有Android工程集成ReactNative页面

React Native出自Facebook之手, 而且刚刚更新了文档, 差一点我就放弃它了, 然而又捞了回来, 相比其他, 毕竟还是大公司大品牌有保障. 不多说了, 想知道更多, 自己网上看吧.网址...
  • u012515223
  • u012515223
  • 2015年10月31日 17:33
  • 3774

RN和原生Android混合开发之相互调用

1 官网上的原生模块理解官网上有原生模块这一节,我的理解是这一节要教给我们,如何在RN中的JS代码中调用原生的JAVA代码,同样包括调用Toast和Dialog,这种我们已经写好的组件,但不包括Vie...
  • wu_xiao_yang
  • wu_xiao_yang
  • 2016年12月03日 15:34
  • 3651

如何在现成项目集成ReactNative(Android)

如何在现成项目集成RN 本文讲述如何在现成的项目植入ReactNative
  • qcjabc
  • qcjabc
  • 2016年03月03日 16:17
  • 572

原生Android项目中集成React native页面

看下效果: 1.先建一个空目录 eg:android-reactnative,在目录下新建一个android 文件夹,将自己原有的Android工程(假如没有就创建一个HelloWorld ...
  • jujishou521
  • jujishou521
  • 2016年08月31日 12:12
  • 726

集成RN到原有的Android项目

本项目是在linux-debian环境下运行,与windows可能有不同 本项目使用的是react_native 0.50.3 按照ReactNative中午网先搭建react环境。 进入工程目...
  • qq_25367755
  • qq_25367755
  • 2017年11月14日 14:37
  • 210

RN与android混合开发及RN调用原生方法

  • 2017年04月06日 10:56
  • 49.29MB
  • 下载

React Native:Android集成React Native的一些配置

React Native:Android集成React Native的一些配置
  • a526001650a
  • a526001650a
  • 2017年07月14日 18:05
  • 455

Android原生项目集成React Native

1.创建Android工程:ReactNativeApp 关于如何创建Android工程就不再多述了。 2.工程创建完毕后,切换到Android Studio左下角的Terminal窗口,...
  • u013718120
  • u013718120
  • 2017年02月13日 18:01
  • 6657

Android原生项目集成React Native

开发环境准备首先按照开发环境搭建教程来安装React Native在安卓平台上所需的一切依赖软件(比如npm)。在应用中添加JS代码在项目的根目录中运...
  • voidmain_123
  • voidmain_123
  • 2017年04月01日 17:49
  • 3103

原生安卓[Android]项目中集成RN[React Native]项目

原生安卓Android项目中集成RNReact Native项目 说明 开发环境 集成步骤 总结原生安卓[Android]项目中集成RN[React Native]项目1.说明: 1.基于对RN技术的...
  • qq_14923483
  • qq_14923483
  • 2017年03月29日 15:53
  • 222
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android之原生项目集成React Native
举报原因:
原因补充:

(最多只允许输入30个字)