转载请注明出处:王亟亟的大牛之路

先安利,有空我都会更,看到的好东西都会放进来:https://github.com/ddwhan0123/Useful-Open-Source-Android

公司某个app的rn模块已经上线了,虽然我没参与,但是从调研开始我都有大致了解,然后今天去学系列下,结合官方例子就写了这篇


基础配置部分

解说过程是从你Native加入rn模块,新建的rn项目配置的东西都有

首先 在你的项目根目录同级开一个rn目录(这里只是举个例子)

mkdir xxx-rn && cd xxx-rn

像这样

xxx-rn就是刚才新建的文件夹

lib和project就是你原有的项目


然后下所需的包以及生成package.json文件

可能需要FQ,或者跑tb的镜像

npm init

以及

npm install react react-native --save

再然后就把你的js代码丢到这里就行了,丢完之后启动服务

node node_modules/react-native/local-cli/cli.js start

就是起一个node.js的服务


然后在package.json文件里添加这段脚本

  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },

以后就直接 npm start就能跑 不用打一长串路径,类似于 win的环境变量


通常 rn的编译会跑 外网maven但是其实现在新版本rn发布都是走的npm,所以这些依赖都在你的”本地maven”环境里,所以需要修改主项目的build.gradle

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"
        }
    }
}

一定要先mavenLocal()不然maven{}将没有效果,指向的地址其实也就是本地的”com.facebook.react.react-native”

这些都加完了ok,那再添加react-native 依赖

dependencies {
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
}

至此 基本的配置就都ok了,开始搞安卓代码(这部分官网抄的)

安卓代码部分

//需要继承ReactActivity
public class MainActivity extends ReactActivity {
    //根视图
    private ReactRootView reactRootView;
    //RN管理类
    private ReactInstanceManager reactInstanceManager;

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "WjjPro";
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //初始化
        reactRootView = new ReactRootView(this);
        //初始化,这部分可以看api文档,具体字段内容还是比较多的
        reactInstanceManager = ReactInstanceManager.builder()
                //应用上下文
                .setApplication(getApplication())
                //js打包的名字
                .setBundleAssetName("index.android.bundle")
                //js首页
                .setJSMainModuleName("index.android")
                //基础的各种manager
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                //初始化执行的时间
                .setInitialLifecycleState(LifecycleState.BEFORE_RESUME)
                .build();
        reactRootView.startReactApplication(reactInstanceManager, "WjjPro", null);
        //渲染
        setContentView(reactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }

    @Override
    protected void onPause() {
        super.onPause();
        Log.d("--->","onPause");
        if (reactInstanceManager != null) {
            reactInstanceManager.onHostPause();
        }
    }

    @Override
    protected void onResume() {
        super.onResume();
        Log.d("--->","onResume");
        if (reactInstanceManager != null) {
            reactInstanceManager.onHostResume(this, this);
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        Log.d("--->","onDestroy");
        if (reactInstanceManager != null) {
            reactInstanceManager.onHostDestroy();
        }
    }

    @Override
    public void onBackPressed() {
        Log.d("--->","onBackPressed");
        if (reactInstanceManager != null) {
            reactInstanceManager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }

//    @Override
//    public boolean onKeyUp(int keyCode, KeyEvent event) {
//        if (keyCode == KeyEvent.KEYCODE_BACK && reactInstanceManager != null) {
//            reactInstanceManager.showDevOptionsDialog();
//            return true;
//        }
//        return super.onKeyUp(keyCode, event);
//    }
}

reactInstanceManager做了一个统筹管理,把我们Native的各种行为与rn的js页面做关联,分发以及管理

通过log明显2者的关联已经有效

例子源码地址:https://github.com/ddwhan0123/ReactNativeDemo

混合开发的大趋势之一React Native与Android联调的更多相关文章

  1. 混合开发的大趋势之一React Native之页面跳转

    转载请注明出处:王亟亟的大牛之路 最近事情有点多,没有长时间地连贯学习,文章也停了一个多礼拜,愧疚,有时间还是继续学习,继续写! 还是先安利:https://github.com/ddwhan0123 ...

  2. 混合开发的大趋势之一React Native之简单的登录界面

    转载请注明出处:王亟亟的大牛之路 这些天都在学习RN这部分吧,然后写了个简单的登陆业务,从"实战"中讲解吧 还是继续安利:https://github.com/ddwhan0123 ...

  3. 混合开发的大趋势之一React Native手势行为那些事

    转载请注明出处:王亟亟的大牛之路 最近项目部分模块重构,事情有点多,学习进度有所延缓,外加一直在吸毒(wow你懂的),导致好多天没发问了,其实这部分知识月头就想写了,一直没补. 话不多说先安利:htt ...

  4. 混合开发的大趋势之一React Native之页面跳转(2)+物理返回+特定平台代码

    转载请注明出处:这里写链接内容 今天是10月份的最后一天,我加了3个月来的第一个班,挤出了这篇. 废话不多先安利,然后继续学习 RN 有好东西都往里面丢,努力做好归纳 https://github.c ...

  5. 混合开发的大趋势之一React Native之Image (脑动理解)

    文章是宝宝自己写的,你可以转走,标明哪来的就行王亟亟的大牛之路 国庆这些天要么旅游要么WOW,感觉整个人都废了.. 直接从黄种人晒成了非洲大酋长..然而还是无橙,这礼拜要做7天,昨天把单元测试的东西整 ...

  6. 混合开发的大趋势之 一个Android程序员眼中的 React.js 块级作用域 和 let

    转载请注明出处:王亟亟的大牛之路 最近都有事干然后,快到月底了这个月给CSDN的博文也就两篇,想想也蛮多天没更了,那就来一篇. 老规矩,先安利:https://github.com/ddwhan012 ...

  7. 混合开发的大趋势之 一个Android程序员眼中的 React.js 箭头函数,const, PropTypes

    转载请注明出处:王亟亟的大牛之路 昨天写了篇React.js的开头之作,讲了讲块级作用域和let,先安利:https://github.com/ddwhan0123/Useful-Open-Sourc ...

  8. 【React Native开发】React Native For Android环境配置以及第一个实例(1)

    年9月15日也公布了ReactNative for Android,尽管Android版本号的项目公布比較迟,可是也没有阻挡了广大开发人员的热情.能够这样讲在2015年移动平台市场上有两个方向技术研究 ...

  9. 移动开发发展方向-----Hybird混合开发3大方案

    移动开发发展方向-----Hybird混合开发3大方案

随机推荐

  1. 1.引入jQuery

    http://libs.baidu.com/jquery/2.1.4/jquery.js

  2. uva656 Optimal Programs

    Optimal Programs As you know, writing programs is often far from being easy. Things become even hard ...

  3. 使用Nana进行C++ GUI开发

    Nana官网地址:nanapro.org 简单示例:NanaDemo.cpp #include <nana/gui.hpp> #include <nana/gui/widgets/b ...

  4. 最长回文---hdu3068 (回文串 manacher 算法模板)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3068 题意很清楚:就是求一个串s的子串中最长回文串的长度:这类题用到了manacher算法 #incl ...

  5. 如何用Qt Creator输出helloworld

    0 引言:相比于MFC只要直接在VS上搭建,Qt的配置就相对复杂了,Qt新手上路,老司机绕道,记录下配置Qt的整个过程,直到最终用C++输出“hello world”. 搭建环境:Win10 + qt ...

  6. (3.15)常用知识-sql server分页

    推荐使用row_number over()方法,或2012以上使用offset PageSize = PageNumber = 方法一:(最常用的分页代码, top / not in) UserId ...

  7. Spark2.0 协同过滤推荐

    ALS矩阵分解 http://blog.csdn.net/oucpowerman/article/details/49847979 http://www.open-open.com/lib/view/ ...

  8. HDU1176:免费馅饼(dp,数字三角形的应用)

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1176 这题就是数字三角行的变形,可惜对于我这个渣渣来说就是没发现,区别是他可以保持在三个点,他左边的点,右 ...

  9. STL make_heap push_heap pop_heap sort_heap

    make_heap: default (1) template <class RandomAccessIterator> void make_heap (RandomAccessItera ...

  10. isEnable() 和 isDisplayed() 和 isSelected()

    isEnable().isDisplayed()和isSelected() 1.以上三个为布尔类型的函数 2.isEnable用于存储input.select等元素的可编辑状态,可以编辑返回true, ...