react native 调用Android原生方法
来源:https://www.youtube.com/watch?v=WmJpHHmOKM8
教程:https://www.youtube.com/watch?v=GiUo88TGebs Breaking Down Bridging in React Native by Peggy Rayzis of Major League Soccer


参考地址:https://www.youtube.com/watch?v=O4CRwJWH3s4
首先使用android studio打开项目

将项目路径切换成,源代码的根路径

在项目的源代码目录加入一个类

类命名

再用同样的方法创建另一个类

在visual studio code打开项目,修改其中一个类


react-native new-library --name MyNativeModule
参考地址:React Native调用原生组件
官方地址:https://facebook.github.io/react-native/docs/native-modules-android.html
React Native 调用原生Android方法:
第一步:创建一个类,需要实现于ReactContextBaseJavaModule这个Java的类
public class MyNativeModule extends ReactContextBaseJavaModule {
private ReactApplicationContext mContext;
public MyNativeModule(ReactApplicationContext reactContext) {
super(reactContext);
mContext = reactContext;
}
}
第二步:该类中,一定需要实现一个getName的方法
@Override
public String getName() {
return MODULE_NAME;
}
第三步:可选的参数:getConstants 方法会将传递给 JavaScript 的常量返回。这个方法的实现并不是必须的,但是却对在 JavaScript 和 Java 中同步的预定义的关键字的值非常重要
@Override
public Map<String, Object> getConstants() {
final Map<String, Object> constants = new HashMap<>();
constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
return constants;
}
第四步:注册模块:在使用 Java 的最后一步就是注册这个模块,这将在你的应用包中的 createNativeModules 发生。如果一个模块没有被注册,那么它在 JavaScript 是不可用的。
class MyReactPackage implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(
ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new ToastModule(reactContext));
return modules;
}
自己操作:
第一步:增加AAR包

第二步:增加Android代码
react native 调用Android原生方法的更多相关文章
- uni-app&H5&Android混合开发三 || uni-app调用Android原生方法的三种方式
前言: 关于H5的调用Android原生方法的方式有很多,在该片文章中我主要简单介绍三种与Android原生方法交互的方式. 一.H5+方法调用android原生方法 H5+ Android开发规范官 ...
- 通过js调用android原生方法
有时候我们有这样一个需求,监听html中控件的一些事件.例如点击html中某个按钮,跳转到别的activity,复制某段文本. 首先是对webview的设置: myWebView = (WebView ...
- Flutter学习(9)——Flutter插件实现(Flutter调用Android原生
原文地址: Flutter学习(9)--Flutter插件实现(Flutter调用Android原生) | Stars-One的杂货小窝 最近需要给一个Flutter项目加个apk完整性检测,需要去拿 ...
- React Native For Android 架构初探
版权声明:本文由王少鸣原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/171 来源:腾云阁 https://www.qclo ...
- React Native for Android 学习
前言 Facebook 在2015.9.15发布了 React Native for Android,把 JavaScript 开发技术扩展到了移动Android平台.基于React的React Na ...
- React Native知识12-与原生交互
一:原生传递参数给React Native 1:原生给React Native传参 原生给JS传数据,主要依靠属性. 通过initialProperties,这个RCTRootView的初始化函数的参 ...
- PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码
PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码 看看新闻网>看引擎>开源产品 0人收藏此文章, 发表于8小时前(2013-09-06 00:39) ...
- React native 之android的图标和启动图片
哎哎呀呀,上篇说到了react native的IOS的图标和启动图片的设置,其实最主要的是尺寸!相应的尺寸设定好了以后就不会报错了! ok~这篇说的是React native的android的图标和启 ...
- 【React Native开发】React Native For Android环境配置以及第一个实例(1)
年9月15日也公布了ReactNative for Android,尽管Android版本号的项目公布比較迟,可是也没有阻挡了广大开发人员的热情.能够这样讲在2015年移动平台市场上有两个方向技术研究 ...
随机推荐
- vue-transition-move
<!Doctype> <html> <head> <meta charset="utf-8"> <meta name=&quo ...
- Java设计模式の装饰者模式
目录 一.问题引入 二.设计原则 三.用装饰者模式解决问题 四.装饰者模式的特点 五.装饰者模式的定义 六.装饰者模式的实现 七.java.io包内的装饰者模式 一.问题引入 咖啡店的类设计: 一个饮 ...
- devDependencies 和 dependencise 的区别
在使用 npm install 安装模块或者插件的时候,在命令中可以添加俩种参数把他们写入到 pakeage.json 文件里面去: --save ( 简写 -S ) --save-dev ( 简写 ...
- [洛谷P1404] 平均数
洛谷题目链接:平均数 题目描述 给一个长度为n的数列,我们需要找出该数列的一个子串,使得子串平均数最大化,并且子串长度>=m. 输入输出格式 输入格式: N+1行, 第一行两个整数n和m 接下来 ...
- Ubuntu12.04 安装nginx和mongo过程
1.安装php和php-cgi apt-get install php5 php5-cgi 2.安装 nginx apt-get install nginx 3.安装 MongoDB apt-get ...
- android抽屉导航的设计准则
我阅读了google官方的关于抽屉导航的设计准则,这可以给我带来什么帮助?最起码,我可以知道,抽屉导航适用在什么场景中,使用它时要注意什么事项.App的设计是有规则可以依据的,比如,使用抽屉导航时,是 ...
- 【NOIP】提高组2005 过河
[算法]状态压缩型DP [题解] Q=tx+(t-1)y 对于Q≥t(t-1),x,y一定有解. 所以当两石子间距离long>t(t-1)时,令long=t(t-1),重新构造数组即可. [注意 ...
- 2017 ACM-ICPC 亚洲区(乌鲁木齐赛区)网络赛 H. Skiing (拓扑排序+假dp)
题目链接:https://nanti.jisuanke.com/t/16957 题目: In this winter holiday, Bob has a plan for skiing at the ...
- ...args剩余参数用法
剩余参数语法允许我们将一个不定数量的参数表示为一个数组. function sum(...theArgs) { return theArgs.reduce((previous, current) ...
- javascript延迟对象
1.模拟任务队列: function taskQueue() { var taskList = []; var isRun = false; this.addTask = function (task ...