关闭

React Native 和Android 原生页面相互调用

标签: androidandroid开发
309人阅读 评论(0) 收藏 举报
分类:

React Native 和Android 原生页面相互调用

React Native 在2015年十月份左右支持了对Android的开发,使用这个框架进行app开发,既拥有了native的用户体验,又保留了react的开发效率。但是由于这个框架还有不完善的地方,所以在进行android开发的时候许多组件和功能还需要使用Android原生来实现,这就需要RN页面和Android原生页面的相互调用和跳转。我在开发过程中遇到了这种需求,所以在自我摸索中实现了功能,尽管里面还有不完善的地方,还请各位提出宝贵的建议。个人原创!(以下的开发都是在Mac环境下的)

一、RN页面调用原生模块,这个功能在React Native官网上介绍的很清楚,我这里就再简单的解释一下。

  • 首先我们需要按照官网上配置开发环境,这里我就不一一介绍了,后期我会在下面给大家贴上环境配置(Mac)的链接,很详细。

  • 环境配置好后,我们使用命令行 react-native init <项目名称> ,这样会在你的文件目录下生成一个文件夹,打开后会有许多文件,包括index.android.js和index.ios.js,以及android文件夹,ios文件夹……这里就只介绍index.android.js文件和android文件夹。原生功能就在android文件夹中进行开发,react 功能就在index.android.js中开发。

  • 我们先进行原生页面的开发,我们将android文件夹导入到Android Studio中(只要是会android的人这一步就不用解释了吧),这时候就可以运行了,但是有可能会遇到下面这个问题:
    错误信息
    当碰见这个错误时,我们需要在andorid项目的app/src/main目录下创建一个名为assets的文件夹,然后,我们在第一步是生成的项目文件夹中找到package.json文件,打开后,在scripts中加入如下代码:

“bundle-android”:”react-native bundle –platform android –dev false –entry-file index.android.js –bundle-output android/app/src/main/assets/index.android.bundle –sourcemap-output android/app/src/main/assets/index.android.map –assets-dest android/app/src/main/res/”


之后在项目的根目录下,在命令行中运行如下命令:

react-native bundle –platform android –dev false –entry-file index.android.js –bundle-output android/app/src/main/assets/index.android.bundle –sourcemap-output android/app/src/main/assets/index.android.map –assets-dest android/app/src/main/res/


这时候会在创建的assets文件夹中生成两个文件 index.android.bundle和index.android.bundle.meta,这两个文件我们不需要管他。这时候重新运行,就可以运行成功了。还需要一步:摇晃手机,菜单弹出后,找到Dev Settings,再进入Debug server host&port for device,在里面填你电脑的ip地址,后面加上冒号8081,返回后再次摇晃手机,点击Reload就可以了。

  • 这一系列操作做好后,就可以进入正题了,使用react native来操作android原生来进行原生页面的跳转:

首先我们新建一个java文件起名为JumpModule继承ReactContextBaseJavaModule,实现里面的构造方法,并重写getName()和canOverrideExistingModule()两个方法,其中getName()是必须要重写的,这是暴露给React Native所引用的Module的名字,canOverrideExistingModule()是如果React Native和你有相同的Module时,返回true即表示允许覆盖,返回false表示不允许覆盖。jump()就是暴露给react native用的方法,此方法必须加上@ReactMethod的注解。

public class JumpModule extends ReactContextBaseJavaModule{
public JumpModule(ReactApplicationContext reactContext){
super(reactContext);
}
@Override
public String getName(){
return “JumpModule”;
}
@Override
public boolean canOverrideExistingModule(){
return true;
}
@ReactMethod
public void jump(){
Intent intent=new Intent(getReactApplicationContext(),TargetActivity.class);
intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
getReactApplicationContext.startActivity(intent);
}
}


然后我们需要再创建一个java文件,起名为Package实现 ReactPackage,再实现里面的方法:

public class Package implements ReactPackage {
@Override
public List createNativeModules(ReactApplicationContext reactContext) {
List modules=new ArrayList<>();
modules.add(new JumpModule(reactContext));
return modules;
}

@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
    return Collections.emptyList();
}

@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
}

}


再下一步,打开MainApplication文件,在getPackage文件中,加入

new Package()


至此,在Android原生开发的步骤已经结束。

  • 接下来打开index.android.js文件,在你需要使用android原生模块的地方或者需要调用android原生页面跳转的事件中,使用如下代码就可以完成:

NativeModules.JumpModule.jump();


这就完成了react native 调用Android原生模块的功能。

二、Android原生调用RN页面的跳转


  • 我在实现这个功能时,使用的是向Js代码发送消息的方式实现的,还有两种方法,一种是使用接口回调,另一种我记不太清了,有时间我在整理发出来。
    首先向JS模块发送消息,我们可以在需要调用RN页面跳转时,比如说是在一个按钮的监听事件中发送消息,可以使用如下代码:其中,WritableMap是传过去的参数,是以键值对的方式进行传递。

public void click(View view){
sendEvent(getReactInstanceManager().getCurrentReactContext(), “JumpTo”, params);
}
public void sendEvent(ReactContext reactContext, String eventName, WritableMap params){
reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName,params);
}



  • index.android.js文件中,当页面渲染完毕后,添加监听:

DeviceEventEmitter.addListener(‘JumpTo’,(event)=>{
console.log(event[“result”]);
});


这样js代码就可以接收到了原生页面发送过来的消息,RN页面就可以根据原生页面发送过来的消息进行不同的操作。

欢迎转载,请注明出处!

1
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

react-native 填坑之canOverrideExistingModule=true

app在模拟器中卸载了,再重新编译,app却打开不了,直接报错:Native module VectorIconsPackage tired to override modulename for mo...
  • qq_34057640
  • qq_34057640
  • 2017-05-02 16:23
  • 978

React-Native之Android:原生界面与React界面的相互调用

这里原生界面是指用布局文件实现或java代码实现view的Activity,React界面是指用ReactJS实现的界面的Activity。 从某种角度看,React只是充当了Android里的vi...
  • qq_22780533
  • qq_22780533
  • 2016-07-14 11:11
  • 4763

关于React Native 跳转到原生页面界面详解

接上文,实现ReactNative跳转到原生界面的详解步骤. 下面,开始学习吧: 一、自定义一个Module类,并实现RN方法,如下: 创建一个MyIntentModule,继承RN的React...
  • IT_luntan
  • IT_luntan
  • 2017-04-20 11:30
  • 1975

React-Native 原生跳转不同的RN界面的实现思路

最近在研究React-Native开发App,准备把RN运用到自己的毕业设计中,因为以前做过一个购物社交类的App,但是没有做完,所以就想把它完善一下作为毕业设计,而RN可以热更新,所以对于购物类ap...
  • u012760183
  • u012760183
  • 2016-12-20 15:51
  • 2937

React Native调用Android原生代码实现车牌识别功能 apk文件

  • 2017-05-14 12:43
  • 13.05MB
  • 下载

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

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

react-native调用Android原生模块

今天学习了一下在react-native中调用原生安卓模块的使用,发现很多网上的文章都是直接照抄的文档,这样会有一些坑,导致最后无法运行或者成功调用,所以写下这个博客来分享,同时也记录一下学习过程,方...
  • u011272795
  • u011272795
  • 2017-06-12 23:23
  • 434

react native结合Android原生实现调用相机或图库选择图片设置头像

这种功能网上已经有了许多开源组件,虽然是现成的,不过也是需要学习如何使用的,集成到自己项目的过程中可能也会遇到一些问题,而且开源的功能也不一定能够完全的符合自己的需求,所以试着自己实现一下,欢迎大家分...
  • Simple_Simple_Simple
  • Simple_Simple_Simple
  • 2017-02-07 13:42
  • 2261

react native js调用android原生activity

rn编写的js页面怎样跳转到自己写的android activity中呢?只需下面简单几步 1.我们搭建好rn环境后,创建rn项目并运行到设备上(本文省略),在项目的目录下 /android/app/...
  • Zhang_junhui
  • Zhang_junhui
  • 2017-07-19 13:54
  • 517

react-native调用Android的原生方法

对于从前端转型研究RN的小伙伴们不可避免的就是对Android原生的调用,对于没有接触过Android的来说这是困难重重,这篇文章是我用RN调用原生的一些总结,希望对大家有所帮助。 1、初始化一个R...
  • hhy1006894859
  • hhy1006894859
  • 2017-10-20 15:50
  • 53
    个人资料
    • 访问:446次
    • 积分:18
    • 等级:
    • 排名:千里之外
    • 原创:1篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档