RN混合开发,React Native与原生android和ios的交互通信

更新日期: 2017-10-24阅读: 9.5k标签: 交互

在使用react-native混合开发,经常会遇到一种场景:当原生页面的数据更新,返回RN的页面,一下相关数据并未刷新。这里就需要一个转发机制,然后原生应用通过事件的形式通知react-native更新数据,最新版的react-native文档中并未说明,下面讲解一下如何实现:

Android通讯

React-Native代码 : 

import { DeviceEventEmitter , Platform } from 'react-native';

componentWillMount(){//页面被渲染之前执行 if(Platform.OS=='android'){ DeviceEventEmitter.addListener('EventRefresh', (obj)=>{//android监听事件EventRefresh, this._getData(); }); } }

Android代码:

WritableMap params = Arguments.createMap();  
params.putString("message",msg.obj.toString());  
reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit('EventRefresh', params);//名称,数据
IOS通讯

React-Native代码 : 

import { NativeEventEmitter , Platform } from 'react-native';
componentDidMount(){//组件加载完毕执行
        try{
            if(Platform.OS=='ios'){
                const navigationEmitter = new NativeEventEmitter(Global.kmrn.service);
                this._refresh=navigationEmitter.addListener('EventRefresh', (obj) => {//ios监听事件刷新数据
                    this._getData();
                });
            }
        }catch(e){
            console.log("KMRNService错误:"+e);
        }    
    }

IOS代码:  

//自定义的模块类头文件要继承自RCTEventEmitter

#import "RCTEventEmitter.h" @interface ChivoxISE : RCTEventEmitter<RCTBridgeModule> //然后要导出你所有的方法名字 - (NSArray<NSString *> *)supportedEvents { return @[@"EventRefresh", @"other"]; } //分别实现你导出的所有方法,里面都使用sendEventWithName 方法即可 -(void)iseCallback:(NSString*)code result:(NSString*) result { [self sendEventWithName:@"EventRefresh" body:@{ @"code": code, @"result": result, }]; }


链接: https://fly63.com/article/detial/9

H5页面基于接口实现数据交互

对于现在APP开发来说,目前流行的两个方式是原生和H5。就如同之前业界程序猿争论的BS和CS之争一样,业界对于H5和原生也有不小的争论。对于前者的争论在于PC端,后者在于移动端上体现。

设计师们做UI设计和交互设计、界面设计等一般会去什么网站呢?

明明可靠颜值吃饭,却偏偏要靠才华立身,UI设计师就是这样一群神奇的物种。面对“大的同时小一点”、“五彩斑斓黑”、“下班之前给我”……这些甲方大大刁钻的需求,设计师每天都在咬牙微笑讨生活。

H5必知必会之与App交互

本文将就此主题深入探讨H5与App交互的几种常见模式。首先声明,本文涉及的H5与App交互协议和模式没有什么特别独到之处,相反,它们恰恰是在业界既有经验基础上结合项目实际归纳提炼出来的。

网站交互、开发方式和前端框架介绍

这个世界唯一不变的可能就是变化,历史的车轮滚滚向前,它不会因任何人的消极缓慢而停止。时代抛弃你时,连一声再见都不会说。从最开始的Javascrpit、到后来的Jquery、(ExtJs、EasyUI、MiniUI)、Bootstrap、Layui

three.js 事件交互

在three.js中,展示的一切内容都是在canvas中绘制的,所以点击事件点击到物体上是无法获取点击对象的,要获取点击的对象要使用RayCaster,用于在三维空间中进行鼠标拾取

前后端交互技术有哪些

我们都知道,一个完整的IT项目是由多个不同岗位的成员共同完成,包含UI规划、前端开发、后端开发、测验等。为了完成项目的完整性,前后端需求运用技能完成联通。不过,前后端交互技能有哪些呢?

CSS 状态管理,玩出花样了!

CSS用于交互的方式无非就那么几种:伪类::hover、:link、:active ...动画:animation过渡动画:transition,这些交互方式组合起来,真的可以玩出一些花样,例如我们本文的主题,CSS的状态管理

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!