react-native与原生三种交互模式

Android 代码

react-native与原生三种交互模式/*** RCTDeviceEventEmitter方式** @param reactContext* @param eventName    事件名* @param params       传惨*/public void sendTransMisson(ReactContext reactContext, String eventName, @Nullable WritableMap params) {reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, params);}/*** CallBack方式** @param name* @param callback*/@ReactMethodpublic void callBackTime(String name, Callback callback) {callback.invoke(getTimeMillis());}/*** Promise方式* @param name* @param promise*/@ReactMethodpublic void sendPromiseTime(String name, Promise promise) {WritableMap writableMap=new WritableNativeMap();writableMap.putString("age","20");writableMap.putString("time",getTimeMillis());promise.resolve(writableMap);}

js代码

/*** Sample React Native App* https://github.com/facebook/react-native* @flow*/import React, {Component} from 'react';
import {AppRegistry,StyleSheet,Text,View,DeviceEventEmitter,NativeModules,ToastAndroid
} from 'react-native';export default class AllureDataTransmisson extends Component {componentWillMount() {DeviceEventEmitter.addListener('EventName', function (msg) {console.log(msg);ToastAndroid.show("DeviceEventEmitter收到消息:" + "\n" + msg.key, ToastAndroid.SHORT)});}render() {return (<View style={styles.container}><Text style={styles.welcome}onPress={this.getDeviceEventEmitterTime.bind(this)}>RCTDeviceEventEmitter获取时间</Text><Text style={styles.welcome}onPress={this.getCallBackTime.bind(this)}>CallBack获取时间</Text><Text style={styles.welcome}onPress={this.getPromiseTime.bind(this)}>Promise获取时间</Text></View>);}getDeviceEventEmitterTime() {NativeModules.TransMissonMoudle.getTime();}getCallBackTime() {NativeModules.TransMissonMoudle.callBackTime("Allure",(msg) => {console.log(msg);ToastAndroid.show("CallBack收到消息:" + "\n" + msg, ToastAndroid.SHORT)});}getPromiseTime() {NativeModules.TransMissonMoudle.sendPromiseTime("Allure").then(msg=> {console.log("年龄:" + msg.age + "/n" + "时间:" + msg.time);ToastAndroid.show("Promise收到消息:" + "\n" + "年龄:" + msg.age + "时间:" + msg.time, ToastAndroid.SHORT)this.setState({age: msg.age,time: msg.time,})}).catch(error=> {console.log(error);});}
}const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: {fontSize: 20,textAlign: 'center',margin: 10,},instructions: {textAlign: 'center',color: '#333333',marginBottom: 5,},
});AppRegistry.registerComponent('AllureDataTransmisson', () => AllureDataTransmisson);

react-native与原生三种交互模式相关推荐

hadoop离线阶段（第十三节）数据仓库、hive简介、hive安装和hive的三种交互模式
目录数据仓库数据仓库的基本概念数据仓库的主要特征数据仓库与数据库区别数据仓库分层架构数据仓库元数据管理 Hive简介什么是Hive Hive的特点 Hive架构 Hive与Hadoop的 ...
React Native与原生的图片交互问题
项目中的一个需求:在原生系统中调用第三方SDK识别身份证后将获取的信息和图片返回到React Native JSX页面上展示. 首先React Native与原生通信的方式可以采用CallBack 和 ...
原生 APP、Web、混合 APP，三种开发模式有何不同？
前言原生 App 又称Native App,该开发针对 IOS.Android.Windows 等不同的手机操作系统要采用不同的语言和框架进行开发:无论是从开发难度,价格还是周期来看,原生开发都更复 ...
React Native Android原生模块开发实战|教程|心得|怎样创建React Native Android原生模块...
尊重版权,未经授权不得转载本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691503) 告诉大家一个好消息. ...
2021年大数据Hive（二）：Hive的三种安装模式和MySQL搭配使用
全网最详细的Hive文章系列,强烈建议收藏加关注! 后面更新文章都会列出历史文章目录,帮助大家回顾知识重点. 目录系列历史文章前言 Hive的三种安装模式和MySQL搭配使用一.Hive的安装方 ...
Factory-pattern 三种工厂模式
解决问题主要解决创建复杂对象的问题. 应用场景当某一系列对象需要复杂的逻辑控制创建过程,过程创建过程比较复杂时,可以采用工厂模式. 工厂模式常见的有三种: 简单工厂模式: 又称之为静态工厂模式工 ...
Hadoop三种安装模式
2019独角兽企业重金招聘Python工程师标准>>> Hadoop三种安装模式:单机模式,伪分布式,真正分布式一单机模式standalone 单机模式是Hadoop的默认模式. ...
【Tomcat】Tomcat Connector的三种运行模式【bio、nio、apr】
Tomcat Connector(Tomcat连接器)有bio.nio.apr三种运行模式 bio bio(blocking I/O,阻塞式I/O操作),表示Tomcat使用的是传统的Java I/O ...
Tomcat Connector的三种运行模式【bio、nio、apr】
Tomcat Connector(Tomcat连接器)有bio.nio.apr三种运行模式 bio bio(blocking I/O,阻塞式I/O操作),表示Tomcat使用的是传统的Java I/O ...

react-native与原生三种交互模式

react-native与原生三种交互模式相关推荐

最新文章

热门文章