React Native之js调用Android原生使用Callback传递结果给js
如果不清楚js如何调用Android原生,可以先参考我的这篇博客React Native实现js调用安卓原生代码
1 问题
上面的文章只是调用安卓原生显示Toast,但是我们一般会需要调用安卓的代码然后去拿回结果给js,但是我们知道在android层js调用的这个函数返回值必须的void,所以我们需要用到Callback,这里先说Callback
@ReactMethodpublic void methodName() { }
2 使用Callback代码实现
基于我这篇博客里面的 React Native实现js调用安卓原生代码
的MyToastModule.java文件增加下面这个方法
@ReactMethodpublic void showMyName(Callback result) {result.invoke("chenyu");}
然后App.js文件改定如下,增加了一个构造函数,然后给一个text赋了chenzixuan的值
/*** Sample React Native App* https://github.com/facebook/react-native** @format* @flow*/import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, NativeModules} from 'react-native';const instructions = Platform.select({ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',android:'Double tap R on your keyboard to reload,\n' +'Shake or press menu button for dev menu',
});
var myAndroidToast = NativeModules.MyToast;
type Props = {};
export default class App extends Component<Props> {constructor(props){super(props);this.state={myName:'chenzixuan',}}render() {return (<View style={styles.container}><Text onPress={()=> this._androidShowMsg()} style={styles.welcome}>Welcome to React Native!</Text><Text style={styles.instructions}>To get started, edit App.js</Text><Text style={styles.instructions}>{instructions}</Text><Text style={styles.instructions}>{this.state.myName}</Text></View>);}/***调用安卓原生代码 * @private*/_androidShowMsg = () => {myAndroidToast.showMyName((myName)=>{this.setState({myName:myName});});}; }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,},
});
3 运行结果
运行之前要记得在项目的目录下执行下面的命令,它会在android的assets目录下生成index.android.bundle文件,也就是安卓会加载这个js文件,这里也会起到编译js作用,如果有语法错误,这里控制台会提示
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
然后执行运行项目命令
react-native run-android
第一次运行结果图片如下,下面显示的是chenzixuan
然后我点击Welcome to React Native,下面就显示chenyu了
React Native之js调用Android原生使用Callback传递结果给js相关推荐
- JS如何调用Android原生方法
一.引入 JSBridge JSBridge 主要是给 JavaScript 提供调用 Native 功能的接口,让混合开发中的前端部分可以方便地使用 Native 的功能(例如:通讯录.蓝牙). 而 ...
- android自定义Dcloud插件,调用android原生界面并获取返回数据
由于工作的需要,所以我接触到了Dcloud这个我不是很愿意接触的东西.Dcloud也是Webapp的一个工具,同样也可以用来做原生android的插件.比较一下Dcloud和Cordova的优缺点: ...
- React Native实现js调用安卓原生代码
1 问题 实现js调用安卓原始代码,直接上代码,简单粗暴 2 代码实现 1) 实现一个继承ReactContextBaseJavaModule的类,MyToastModule.java文件如下 pub ...
- uni-app中使用native.js调用android API实现双卡发送短信
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.H5.以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台官网地址 因 ...
- JS(Javascript)调用Android原生方法三步走
三步走: 1.webview 一定要设置这三个方法 webSetting.setJavaScriptEnabled(true); webSetting.setJavaScriptCanOpenWind ...
- Android开发-WebView中实现Android调用JS JS调用Android 【三】
老早之前就想总结下Webview相关的知识点了,因为互联网大潮中,很多APP都会使用到Webview,像那些不计其数的电商APP,无一例外的使用Webview:或者一些非电商APP中的像广告页面,注册 ...
- [RN] React Native 键盘管理 在Android TextInput遮盖,上移等问题解决办法
[RN] React Native 键盘管理 在Android TextInput遮盖,上移等问题解决办法 参考文章: (1)[RN] React Native 键盘管理 在Android TextI ...
- Qt for Android 调用android原生接口分享图片或文字
在用Qt开发android应用的时候,有一个需求是通过调用android原生接口去实现图片分享功能,原理很简单,首先在java文件中用android接口封装一个分享功能的方法,然后在C++中调用QAn ...
- Qt for Android调用android原生Toast控件
用Qt开发Android应用,有时候会想着直接调用android原生的一些组件或者打开某些android的系统界面,比如调用Toast显示消息提醒.打开android系统设置页面.这里主要讲解如何通过 ...
最新文章
- 阿里云首席科学家闵万里:我们为什么敢挑战一百年的制度,因为黑科技能为挽救生命抢来50%的可能性
- Log4Net五步走
- 计算机教师的名言是,教师名言
- - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
- C语言试题八之计算下列级数和,和值由函数值返回 S=1+x+x^2/2! + x^3/3!+…x^n/n!
- 后台原理_电气控制原理动图22张,超赞!
- POJ3485 区间问题
- JQuery播放器代理--IE下支持wma格式
- spring security4 问题
- 面试题(一)—Java基础(上)
- 【华为云技术分享】小白学YOLO:YOLOv3网络结构细致解析
- 简述计算机控制系统调试和运行的过程,简述计算机原理与系统启动过程
- pyton 编写脚本检测两台主机之间的通信状态,异常邮件通知
- J1939广播DM1报文
- Java面试宝典(超级详细)
- 阿里巴巴最新开源软件列表(建议收藏系列)
- SiteSucker Pro 4.0.1 扒站神器
- Xshell学生版免费下载使用
- 如何用计算机计算以2为底的对数,log以2为底3的对数计算器怎么写
- win7自动关机(win7自动关机)
热门文章
- 实现一个登录:Mac+.NET 5+Identity+JWT+VS Code
- 22468!Windows 11新预览版发布:旧版系统支持十月终止请速升
- C#新版本风格项目文件(SDK风格项目 SDK-style project)
- NET问答: 如何集中化统一验证 Authorization
- WPF实现仪表盘(刻度跟随)
- .NET Worker Service 作为 Windows 服务运行及优雅退出改进
- .Net单元测试方法
- 如何在 ASP.Net Core 中使用 HTTP.sys WebServer ?
- 大改革,GNOME 3.x将直接跳到GNOME 40
- dotNET:怎样处理程序中的异常(理论篇)?