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






相关文章推荐

使用了realm 后包变大了的解决方法, 和64位库问题。

官方提供的办法: 大部分情况下,在您 release 版本的 apk 文件里,Realm 只占用 800KB 空间。我们发布的版本支持的处理器架构包括 ARM7、ARMv7、ARM64、x8...

Realm 引用多个库的jni架构平台支持冲突的问题

因为原来的工程里面的.so库,只有armeabi,加入Realm库后,引起冲突 log如下: java.lang.UnsatisfiedLinkError: com.android.tools.f...

android 项目中so 文件的问题

1.指定加载指令集包下的so文件 引用:http://blog.csdn.net/chichengjunma/article/details/53815299 React Native项目...

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

原生安卓Android项目中集成RNReact Native项目 说明 开发环境 集成步骤 总结原生安卓[Android]项目中集成RN[React Native]项目1.说明: 1.基于对RN技术的...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Android之Windows下搭建React Native Android开发环境(差不多搞了一天)

最新情报 0.12已经发布。很多原本需要手动修改BUG的部分很多已经不再需要。 安装JDK 从Java官网下载JDK并安装。请注意选择x86还是x64版本。 推荐将JDK的bin目录加入系统P...

React Native环境配置之Windows版本搭建

学习H5 Web开发怎么和安卓原生开发共存呢,React Native直接解决了这个问题:在运用H5开发的同时,还可以有效调用android原生态开发,直接两者兼具,既保留了android原生开发也运...
  • guiman
  • guiman
  • 2016年12月10日 22:07
  • 5486

Android原生项目集成React Native

1.创建Android工程:ReactNativeApp 关于如何创建Android工程就不再多述了。 2.工程创建完毕后,切换到Android Studio左下角的Terminal窗口,...

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

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

React Native集成到原生项目示例

1.创建空项目2.添加RN依赖包 React Native的植入过程同时需要React和React Native两个node依赖包。package.json 我们把具体的依赖包记录在package...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android之原生项目集成React Native
举报原因:
原因补充:

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