怎么安装aptdaemon模块_自己开发一个React Native 模块

0b2a554b5b8e15ff3c26f67079956809.png

大纲

  • 为什么需要 React Native Module
  • 如何创建一个 React Native的模块
  • 编写 Android Toast 功能模块
  • 如何调试 React Native 模块---------官方文档中未提及或者我没有找到,这里是我自己探索的
  • npm 发布一个 React Native 模块(外链接)

为什么需要 React Native Module

各位使用 React Native 时候是否会有碰到仅用React Native 提供的现有API 无法实现的功能。如微信登录、微信/支付宝支付,访问App的数据库SQLite,还有针对性能的提升等等。这些东西在使用React Native 现有的功能无法实现的时候,将需要开发React Native Moduel。当然也可以使用社区中第三方库,这些三方库也是 React Native Module 。

总之,React Native Module 是可以给JS层扩展一些新的功能,这些功能是现有React Native API无法实现的功能,需要与原生代码进行交互的部分。

如何创建一个 React Native的模块

通过官方文档的查阅和学习,知道可以使用 react-native-create-library 这个库来快速创建一个包含Android ,IOS,Windows 系统下的模块,这个模块并且可以直接使用react-native link 快速链接到现有的 React Native 的应用中。

下面将简单介绍如何安装使用 react-native-create-library。

  • 安装 react-native-create-library
# npm
npm install -g react-native-create-library# yarn
yarn add -g react-native-create-library
  • 创建一个 React Native Module 模块
# 这样将创建一个具有 Android ios  windows 3个模块的 React Native Module
react-native-create-library demo # 这样将仅创建一个具有 Android ios 2个模块的 React Native Module
react-native-create-library demo --platforms android,ios

上面就是创建一个React Native Module 的简单介绍,更多关于 react-native-create-library 的使用请移步GitHub官方仓库。

编写 Android Toast 功能模块

这里是参考官网【Android 原生模块】,可以点击查看详情,下面是简单介绍。

  • 所有的Android 原生模块都是继承于ReactContextBaseJavaModule类。
  • ReactContextBaseJavaModule.getName 方法是将当前这个模块暴露给JavaScript层的名字
  • ReactContextBaseJavaModule.getContants 返回的Map对象,是暴露给JavaScript层的一些常量
  • 在ReactContextBaseJavaModule类中使用 @ReactMethod 注解导出一个方法给JavaScript
// 这是上面几个步骤的共同代码// 这里定义一个类继承 ReactContextBaseJavaModule
public class RNToastModule extends ReactContextBaseJavaModule {private final ReactApplicationContext reactContext;public RNToastModule(ReactApplicationContext reactContext) {super(reactContext);this.reactContext = reactContext;}/*** 这里导出的字符串为当前模块的 JS 名称* 在js中获取到当前模块中如下获取到当前模块:* NativeModules.RNToast* NativeModules 为 import { NativeModules } from 'react-native'; 中的 NativeModules* @return*/@Overridepublic String getName() {return "RNToast";}/*** 这里返回的值会被JS模块当做常量来使用* 使用方式为** NativeModules.RNToast.SHORT === Toast.LENGTH_SHORT* NativeModules.RNToast.LONG === Toast.LENGTH_LONG** @return*/@Nullable@Overridepublic Map<String, Object> getConstants() {final Map<String, Object> constants = new HashMap<>();constants.put("SHORT", Toast.LENGTH_SHORT);constants.put("LONG", Toast.LENGTH_LONG);return  constants;}/*** 这里暴露一个方法给 React Native** 在JS中使用方式为:** NativeModules.RNToast.show(msg, duration); // duration 可以使用上面 getConstants 方法暴露出来的常量** @param msg* @param duration*/@ReactMethodpublic void show( String msg, int duration ){Toast.makeText(getReactApplicationContext(), msg, duration).show();}
}
  • 封装一个JavaScript模块
import { NativeModules } from "react-native";
// 下一句中的ToastExample即对应上文
// public String getName()中返回的字符串
export default NativeModules.RNToast;

经过上面几个简单的步骤就开发好了一个 React Native Module 模块,但是这里有一个重要的问题,开发的React Native Module 不可能每个都像Toast这个模块如此简单,应该如何在开发的过程中调试是一个重要的问题,不可能每次都发布到npm上来进行调试,每次发布调试也将影响他人正常使用该模块,而且也给开发带来了非常多不必要的麻烦,因此需要一个非常有效的调试方式,接下来将介绍如何调试React Native 模块。

如何调试 React Native 模块

基本思路为:既然是要调试 React Native 模块,就需要一个 React Native App,然后将自己写的React Native Module模块导入React Native App 中,并且启动App,修改Module,再次安装调试,这样一系列的操作。具体步骤如下:

  • 创建 React Native App
# 创建一个名为 toast_demo 的工程
react-native init toast_demo
# 等待命令的执行,执行完后安装依赖,启动服务,安装app到模拟器或者真机,这样完成了一个react native app的创建
  • 将 React Native Module 模块导入现有的App
# 先在 toast 工程中, yarn link 命令可以将toast工程导入全局,
# 在别的工程中使用yarn link react-native-toast 就可以使用当前的toast工程
# 为什么是 react-native-toast 而不是 toast,可以点开 toast > package.json文件
# 将会发现 toast 工程的 name 是 react-native-toast, 
# 前缀 react-native 是由 react-native-create-library 加上的。
# 因此这里是 react-native-toast 而不是 toast。
yarn link# 在 toast_demo 工程中敲击yarn link react-native-toast,
# 再点开 toast_demo 工程下的node_modules 会发现 react-native-toast被
# 加载到toast_demo/node_modules里面了
yarn link react-native-toast# react-native link 命令不用多说
react-native link react-native-toast

上面的事情都做完了你很开心的启动你的工程,并安装到手机上调试的时候会发现下面这个问题(unable to resolve module 'react-native-toast')

466cef95f6d1a4273dcf275f09f9682a.png

这个问题主要导致的原因是React Native工程不支持 symlinks。怎么解决这个问题呢?

这里使用 haul , 这是一个用于开发 React Native App 的命令行工具。它可以很好的使用 Webpack 生态,以及支持热更新,不用每修改等待React Native 来重新编译,当然它也支持 symlinks ,所以可以使用 haul 来解决上面遇到的这个问题,具体使用方式可以查看官方 GitHub仓库,下面是简单介绍:

# 安装 haul
yarn add --dev haul# 初始化 haul和安装haul的依赖,但是npx 不会准确的安装所有的依赖,因此在使用haul的时候可能会提示漏掉了某些库,
# 只要根据提示安装完所有的依赖即可
yarn haul init
# npm >= 5.2.0 :
npx haul init
# npm < 5.2.0 :
npm install -g npx
npx haul init# 然后启动 haul 相关服务
yarn haul start --platform ios
# Or:
npx haul start --platform ios

我是使用 haul^1.0.0-rc.15 这个版本的 haul,会碰到这个issue中的问题,haul的作者有提供解决方案,修改haul.config.js 为一下内容。

import { createWebpackConfig } from "haul";export default {webpack: env => {const config = createWebpackConfig({entry: './index.js',})(env);config.module.rules.some(rule => {if (rule.test && rule.test.source.includes('js')) {rule.use = [{loader: require.resolve('babel-loader'),options: {presets: [['module:metro-react-native-babel-preset', { enableBabelRuntime: false }]],plugins: [require.resolve('haul/src/utils/fixRequireIssues')],},},];return true;}});return config;}
};

然后重新启动 haul, 将能够正常的运行React Native App 了。

修改 Android Studio 中 react-native-toast 中的代码将会直接映射到 toast 工程中,这是 symlinks 的功能,这个功能非常的方便调试和修改module。

(官方文档中未提及调试这块或者我没有找到,这里是我自己探索的,有更好的方式请各位告知)

开发好一个module,希望别人可以使用或者自己在下次工程中使用,这该怎么办呢?当然是将当前的react native module 发布到 npm 上,怎么发布请继续往下看。

npm 发布一个 React Native 模块(外链接)

这是其他博主写的npm包的创建和发布流程,主要使用 npm publish来发布和更新一个npm包,发布的npm包他人将可以使用npm或者yarn 进行下载和安装使用你写的模块。

以上就是开发一个 React Native Android Module 的过程,如果是IOS也可以类比这个流程来开发调试。

toast 工程样例

toast_demo 工程样例

【参考】

  • Native Modules Setup
  • React Native 中文官方文档 Android 原生模块
  • React Native: npm link local dependency, unable to resolve module
  • haul - Attempted to assign to readonly property

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/501687.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

语言ppt课件猜拳_八年级语文上册第22课 孟子三章讲解及课件下载

八年级语文上册【第一单元】八年级语文上册第1课《消息二则》讲解及PPT课件下载八年级语文上册第2课《首届诺贝尔奖颁发》讲解及PPT课件下载八年级语文上册第3课《“飞天”凌空》讲解及PPT课件下载八年级语文上册第4课《一着惊海天》讲解及PPT课件下载八年级语文上册第5课《国行…

读取txt原理_Mysql客户端任意文件读取学习

前言最近打了 DDCTF和 国赛&#xff0c;发现都考了一个知识点&#xff0c;也就是 MysqlLocalInfile客户端文件读取这个漏洞&#xff0c;下面来详细的学习一个这个漏洞。漏洞形成原因此漏洞形成的主要原因在于 LOAD DATA INFILE这个语法上。在官方文档中的介绍为&#xff1a;该L…

jar包 jdk 停_一文读懂jar包的小秘密

简介java程序员每天不是在创建jar包就是在创建jar包的路上&#xff0c;并且各种依赖引用都是以jar包的形式展示的。但是随着现代IDE的出现&#xff0c;我想很多程序员已经基本上很少直接和jar包打交道了。换句话说&#xff0c;他们已经不认识jar包了。那么jar包到底是什么呢&am…

逻辑代数01律的理解_零基础学习计算机原理:布尔逻辑和逻辑门

Hello World&#xff01;我是老乔&#xff0c;欢迎来到超智星球。在这里&#xff0c;每篇都学一个小知识。微号&#xff1a;超智星球 网站:http://chaozhixingqiu.com这期呢&#xff0c;还是计算机原理系列&#xff0c;上期最后讲到了自动制表机和IBM。本期接着讲计算机历史。#…

文本标点英文对齐_电脑健盘中的所有英文组合意思超值解释建议收藏

电脑键盘上所有英文键的意思1、Esc :取消和退出键2、Tab :表格键切换键3、Caps Lock :字母大小写切换键4、Shift :转换键5、Ctrl: 控制键&#xff0c;需要配合其他键或鼠标使用&#xff0c; 例如复制CtrIC6、Alt: 可选(切换)键&#xff0c;-般与其它键组合使用&#xff0c; 例如…

众辰变频器参数设定_变频器被加密了怎么办?这20个品牌都可以解密

1、西门子6SE70书本型变频器&#xff1a;设定密码打不开时&#xff0c;将P358和P359中数据改为相同即可。2、ABBACS600变频器&#xff1a;在16.03参数中输入密码“23032”&#xff0c;102.01参数设置为false&#xff0c;可以进入设定所有主控板参数。3、三菱740系列变频器&…

python expect_python--pexpect

大家好,最近工作比较忙,所以没时间来更新博客。趁着还没在下个版本来临之前,来这边再更新更新。是之前学习到的一些老知识点,就当来巩固一下了。开心QAQ今天给大家介绍的是--PexpectExpect 程序主要用于人机对话的模拟1.运行程序2.程序要求人的判断和输入3.Expect 通过关键字匹…

xlwings删除数据_xlwings如何删除行和列?

import xlwings as xwsht[2:2].delete()# 删除行sht[1:2, :].delete() # 区域切片的方法sht[B:B].delete()# 删除列sht[:, 1:2].delete()sht[B2].delete()# 删除单元格 (缺省默认右侧左移left&#xff0c;下侧上移up)sht[C2:D4].delete(up) # 删除区域sht[1:4, 2:4].delete(up)…

怎么实现注解_通透!一口气搞懂注解到底怎么用

日志脱敏场景简介在日志里我们的日志一般打印的是 model 的 Json string&#xff0c;比如有以下 model 类public class Request { /** * 用户姓名 */ private String name; /** * 身份证 */ private String idcard; /** * 手机号 *…

嵌套饼图_你真的了解matplotlib吗?---环形图

环形图简介环形图是饼图衍生出来的统计图形&#xff0c;可以看作是两个以上饼图的叠合。环形图与饼图类似&#xff0c;其实是有差别的。饼图是用圆形及圆内扇形的面积来表示数值大小的图形&#xff0c;主要用于表示总体中各组成部分所占的比例。与之对比&#xff0c;环形图中间…

slim 搭建rnn_使用Keras搭建cnn+rnn, BRNN,DRNN等模型

Keras api 提前知道&#xff1a;Normalize the activations of the previous layer at each batch, i.e. applies a transformation that maintains the mean activation close to 0 and the activation standard deviation close to 1.TimeDistributed, 总的来说TimeDistribut…

JAVA入门级教学之(零基础了解计算机)

JAVA小白入门级教学&#xff08;零基础了解计算机基础知识&#xff09; 多动手自己操作&#xff0c;一点一点积累 首先我们了解一下计算机的基础知识 1.计算机构成&#xff08;基础&#xff09;&#xff1a; 硬件&#xff1a;CPU、内存、硬盘、鼠标、显示器、鼠标等&#x…

oppo 手机侧滑快捷菜单_关于oppo手机菜单键调出的方法,原来是这样的

用OPPO手机朋友们&#xff0c;今天来教大家如何调出手机菜单键。工具/材料OPPO手机操作方法01首先&#xff0c;在手机桌面上找到设置&#xff0c;点击进入。02进入设置找到【面部与密码】&#xff0c;并点击它。03然后点击【关闭密码】&#xff0c;要想设置手机菜单键&#xff…

JAVA入门级教学之(JAVA程序的加载和运行)

JAVA程序的加载和运行 多思考多动脑&#xff08;边参考文章最后的示意图&#xff0c;边按步骤理解&#xff09; 1.JAVA程序的加载和运行包括两个非常重要的阶段&#xff1a; 编译阶段运行阶段 2.我们先来了解一下什么是编译阶段&#xff1a; 首先&#xff0c;我们自己动手敲…

abstract类中可以有private的成员_C++|static成员与单例模式

如果需要一个全局对象&#xff0c;如对话框、系统日志、显卡等设备的驱动程序对象、一台PC连接一个键盘等。这样的全局对象只能是一个且是全局的&#xff0c;这就是单例模式&#xff0c;如何实现呢&#xff1f;1 不能在类外部通过构造函数新建对象&#xff1a;构造函数的访问方…

JAVA入门级教学之(JDK安装-JDK、JRE、JVM)

1.下面我们开支安装JDK【JDK开源、免费】 安装地址&#xff1a;https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 选择 Windows x64-->jdk-8u221-window-x64.exe 下载 下载完成后 双击JDK安装包-->进入安装界面&#xff08;…

vim显示python嵌套级_在Vim中为Python突出显示语法

Vim中针对Python的语法突出显示(目标是Ubuntu 12.10)这是有关如何在Ubuntu 12.10的Python中设置语法突出显示的演练。 你所看到的就是你得到的&#xff1a;[https://github.com/sentientmachine/Pretty-Vim-Python/]一旦掌握了如何为特定用户将配色方案和语法突出显示注入到vi编…

JAVA入门级教学之(编写第一个HelloWorld程序)

目录 1.创建一个HelloWorld.java文件 2.用记事本打开HelloWorld.java 3.接下来我们要完成xxx.java-->xxx.class的步骤 怎么解决javac不可用的问题&#xff1a; 4.配置环境变量path 怎么配环境变量Path&#xff1f; 5.接下来就是在DOS命令窗口下进行编译【javac java源…

springboot api文档_SpringCloud/SpringBoot - 自动生成API文档

SpringCloud/SpringBoot 的项目一定要前后分离&#xff0c;这就需要一个API文档生成的工具&#xff0c;后端一定要和前端或者是移动端对接接口&#xff0c;那么问题来了&#xff0c;接口是不是要自己写给他们看&#xff0c;一般的会采用Excel或者Word来写&#xff0c;高级一点的…

JAVA入门级教学之(classpath的配置)

目录 JAVA入门级教学之&#xff08;classpath的配置&#xff09; 1.打开DOS命令窗口&#xff0c;执行java HelloWorld 2.疑问&#xff1f;&#xff1a;为什么会出现找不到HelloWorld.class文件&#xff1f; 3.解释&#xff1a; JAVA入门级教学之&#xff08;classpath的配置…