关闭

Android之原生项目集成React Native

标签: react nativeandroid集成React Native
4340人阅读 评论(2) 收藏 举报
分类:

      上节我们简单讲解在一个用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






5
0

猜你在找
【直播】机器学习&深度学习系统实战(唐宇迪)
【直播】Kaggle 神器:XGBoost 从基础到实战(冒教授)
【直播回放】深度学习基础与TensorFlow实践(王琛)
【直播】计算机视觉原理及实战(屈教授)
【直播】机器学习之凸优化(马博士)
【直播】机器学习之矩阵(黄博士)
【直播】机器学习之概率与统计推断(冒教授)
【直播】机器学习之数学基础
【直播】TensorFlow实战进阶(智亮)
【直播】深度学习30天系统实训(唐宇迪)
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:545635次
    • 积分:7859
    • 等级:
    • 排名:第2538名
    • 原创:60篇
    • 转载:7篇
    • 译文:0篇
    • 评论:1462条
    最新评论