文档章节

如何在 React Native 中写一个自定义模块

极光推送
 极光推送
发布于 2017/06/19 10:45
字数 1546
阅读 479
收藏 8
点赞 0
评论 1

前言

在 React Native 项目中可以看到 node_modules 文件夹,这是存放 node 模块的地方,Node.js 的包管理器 npm 是全球最大的开源库生态系统。提到npm,一般指两层含义:一是 Node.js 开放式模块登记和管理系统,另一种是 Node.js 默认的模块管理器,是一个命令行软件,用来安装和管理 node 模块。本文旨在探讨如何在 React Native 中写一个自定义的 npm 模块(类似于插件),并上传到 npm 上供他人使用。

npm 使用介绍

npm 是一个 Node.js 模块,安装 Node.js 会默认安装 npm,可以在终端中使用以下命令来查看 npm 的版本:

npm -v

升级 npm:

sudo npm install npm -g

安装模块(安装完毕后会产生一个node_modules目录,其目录下就是安装的各个node模块):

npm install <ModuleName>

查看 npm 配置:

npm config list

设置代理:

//设置 http 代理
npm config set proxy http://server:port
//设置 https 代理
npm config set https-proxy http://server:port 

上面介绍了一些 npm 基本命令,接下来就可以在本地创建一个模块啦。 首先打开终端中新建一个你想在此创建自定义模块的文件夹,然后在命令行中登录 npm。输入以下命令:

npm adduser

接下来会提示你输入用户名和密码还有邮箱,一一完成后就可以输入以下命令来查看当前 npm 用户了:

npm whoami

如果正确显示了刚才注册的用户名,说明登录成功了。然后就使用以下命令来创建 npm 模块:

npm init

执行上述命令后,会引导你创建一个package.json文件,包括名称、版本、作者这些信息等。

创建模块

这里要提一下,为什么要写一个自定义模块。因为 React Native 虽然实现了很多 Native 组件,并且提供了丰富的 API,但是有些原生库还是不支持的,而且有很多开源的组件和库是面向原生的,因此要想在 React Native 中使用这些组件和库就需要自己定义一个模块,这样也方便别人集成。接下来我们直接进入正题。写一个 React Native 中可以使用的自定义模块。在命令行中执行

react-native init AwesomeProject

初始化一个 React Native 项目。这里以 Android 为例,用 Android Studio 选择菜单 File->open 打开 AwesomeProject 文件夹下的 android 文件夹,然后选择 File -> New -> New Module,选择创建一个 Android Library,如图: 如图所示,这里新建了一个 Library module,接下来点击 finish 就可以看到如下的目录结构:

然后将所需要依赖的 jar 放到 libs 目录下,这里以使用 jpush-sdk 为例,将官网上下载的 libs 复制到 libs 下,把相关的资源文件放到 res 文件夹下,再把 AndroidManifest 文件内容复制过来,更改一下包名,最后在 build.gradle 中配置一把,如下(这里要注意把 targetSdkVersion 改成 22,在23上运行可能会闪退):

apply plugin: 'com.android.library'
android {    
  compileSdkVersion 23    
  buildToolsVersion "23.0.2"    
  defaultConfig {        
    minSdkVersion 16        
    targetSdkVersion 22        
    versionCode 1        
    versionName "1.0"        
    manifestPlaceholders = [                
      JPUSH_APPKEY: "yourAppKey",  //在此修改JPush的AppKey                    
      APP_CHANNEL: "developer-default"      //应用渠道号        
    ]    
  }    
  lintOptions {        
    abortOnError false        
    warning 'InvalidPackage'    
  }    
  sourceSets {        
    main {            
      jniLibs.srcDirs = ['libs']        
    }    
}
}
repositories {    
  mavenCentral()
}

dependencies {    
  compile fileTree(dir: 'libs', include: ['*.jar'])    
  compile "com.facebook.react:react-native:+"
}

到此为止,我们已经完成了第一步操作,接下来需要写 Native 和 JS 交互的代码,可以参考我的这篇文章中 JS 调用 Native 以及 Native 调用 JS 部分,这里不再赘述。假设我们已经完成了 Native 部分代码,我们如何才能在 JS 中让他人能够通过 import 的方式调用我们的 JS 代码,从而调用 Native 呢?首先进入 my-react-library 文件夹,然后在终端执行

npm init

生成 package.json 文件(注意这里的 name 字段,这里是别人引用你的模块的名字),然后再创建一个 index.js 文件,这是 node 模块的 JS 入口,这里推荐使用 Sublime Text 进行 JS 的编写。这里以 jpush-react-native 为例:

jpush-react-native/index.js 部分代码

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

// 通过 NativeModules 找到我们在 Native 定义的 JPushModule 类
const JPushModule = NativeModules.JPushModule;

export default class JPush {

	/**
	 * Android only
	 * 初始化JPush 必须先初始化才能执行其他操作
	*/
	static initPush() {
		JPushModule.initPush();
	}
}

上面定义了一个 initPush 方法,initPush 实际上调用了 JPushModule 中定义的 initPush 方法,其他方法与此类似,本质上都是通过 NativeModules 调用了 Native 提供的方法。

发布

到此为止,我们已经完成了 React Native 自定义模块。现在可以发布我们的自定义模块了。在 package.json 所在的目录下执行

npm publish

就可以把我们的自定义模块上传到 npm 库了。每次更新版本时,需要改动 package.json 中的 version 值,然后再执行 npm publish 即可。

使用

在 React Native 目录下,执行:

npm install my-react-library --save

安装完成后就会把这个模块保存到 node_modules 文件夹下,由于我们的模块是一个 Android Library 项目,所以在 Native 中还需要配置一下。主要是添加项目依赖:

someone's react-native project/some module/build.gradle

dependencies {    
  compile fileTree(dir: "libs", include: ["*.jar"])    
  compile "com.android.support:appcompat-v7:23.0.1"    
  compile "com.facebook.react:react-native:+"  // From node_modules   
  // 在 dependecies 中加入自定义模块 
  compile project(':my-react-library')
}

然后在 settings.gradle 中也要配置一下:

someone's react-native project/settings.gradle

include ':app', ':my-react-library'
project(':my-react-library').projectDir = new File(rootProject.projectDir, '../node_modules/my-react-library/android')

在 MainActivity 中将自定义的 Package 添加进去:

MainActivity.java

...
mReactInstanceManager = ReactInstanceManager.builder()                
.setApplication(getApplication())                
.setBundleAssetName("index.android.bundle")                
.setJSMainModuleName("react-native-android/index.android")                
.addPackage(new MainReactPackage())
//添加自定义的 package
.addPackage(new MyReactPackage())
...

如果是 RN 0.29.0 以上版本,则应在 MainApplication 中添加:

MainApplication.java

@Overrideprotected List<ReactPackage> getPackages() {    
return Arrays.<ReactPackage>asList(            
    new MainReactPackage(),            
    new MyReactPackage()    
  );
}

到此为止我们完成了 Native 部分的配置(完成后 sync 一下),接下来就可以使用了。 别人要使用我们的模块时,就可以这样写:

someone.js

//这里的 'my-react-library'是在 package.json 定义的 name
// 这样就可以
import MyModule from 'my-react-library'

export default class SomeClass  extends React.Component {
    componentDidMount() {
      // 调用 index.js 中定义的 doSomething()
      MyModule.doSomething();
    }
}

作者:KenChoi - 极光推送

原文:如何在 React Native 中写一个自定义模块

知乎专栏:极光日报

© 著作权归作者所有

共有 人打赏支持
极光推送
粉丝 40
博文 103
码字总数 118329
作品 1
深圳
个人站长
加载中

评论(1)

奥道易通短信平台
奥道易通短信平台
东西蛮好
RN拆包工具:Rabbit-bundler

rabbit-bundler是为了解决RN产出的bundler包文件过大的打包工具;可以按需将模块按照基础&业务生成两个文件。 思路 基于RN官方的打包工具使用unbundle platform android已经可以拆包,不过是...

乘着风 ⋅ 06/17 ⋅ 0

从Android到React Native开发(四、打包流程解析和发布为Maven库)

1、从Android到React Native开发(一、入门) 2、从Android到React Native开发(二、通信与模块实现) 3、从Android到React Native开发(三、自定义原生控件支持)  作为失踪人口,本篇是对...

恋猫月亮 ⋅ 06/13 ⋅ 0

Dore 混合应用框架 —— 基于 React Native 的混合应用迁移方案

上个周末,在写我的年终总结,有了一点新灵感 —— 其实是 xxx 的原因。 在半年前的那篇《我们是如何将 Cordova 应用嵌入到 React Native 中》中,我介绍了如何将 Cordova 嵌入 React Native...

⋅ 2017/12/20 ⋅ 0

如何构建你的聊天界面

如果你想使用 React-Native 开发一款聊天应用,你很可能会了解或者使用 react-native-gifted-chat 这个库,这是一个很优秀的库,使用灵活基本能够满足大部分开发者的 IM 项目需求。 我的项目...

极光日报 ⋅ 2017/12/05 ⋅ 0

如何用 React Native 创建一个iOS APP?(二)

我们书接上文《如何用 React Native 创建一个iOS APP?》,继续来讲如何用 React Native 创建一个iOS APP。接下来,我们会涉及到很多控件。 1 AppRegistry.registerComponent( 上述是定义应用...

OneAPM蓝海讯通 ⋅ 2016/01/12 ⋅ 0

React Native 从入门到原理

React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却寥寥无几。 本文分为两个部分:上半部分用通俗的语...

guozhendan ⋅ 2017/03/20 ⋅ 0

React-native 拆包

react-native拆包 拆包是React-Native项目不得不面临的一个重要技术门槛。 为什么要拆包? bundle文件过大: 一个Hellworld的App,如果使用0.53RN 官方命令react-native bundle打包出来的JSB...

乘着风 ⋅ 06/17 ⋅ 0

react-native的一些示例--ReactNativeRollingExamples

这是一个react-native的一些example,目前支持iOS。 另外整理一份react-native学习列表,react-native学习列表 安装 npm install react-native rolling examples包含以下这些: 列表视图的使...

匿名 ⋅ 2016/06/28 ⋅ 0

如何实现 React Native 里的页面导航系统

如何实现 React Native 里的页面导航系统 Glow 技术团队博客2018-01-071 阅读 reactjavascriptnavigation React Native 中的页面导航和跳转一直是一个让人头疼的问题,其实社区里也已经有各种...

Glow 技术团队博客 ⋅ 01/07 ⋅ 0

关于 React Native,您想知道的都在这里了

React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5...

OSC源创君 ⋅ 2016/10/31 ⋅ 20

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Linux中的端口大全

1 被LANA定义的端口 端口 名称 描述 1 tcpmux TCP 端口服务多路复用 5 rje 远程作业入口 7 echo Echo 服务 9 discard 用于连接测试的空服务 11 systat 用于列举连接了的端口的系统状态 13 d...

寰宇01 ⋅ 9分钟前 ⋅ 0

Confluence 6 如何备份存储文件和页面信息

备份的 ZIP 文件包含有 entities.xml,这个 XML 文件包含有 Confluence 的所有页面内容和存储附件的目录。 备份 Zip 文件结构 页面的附件是存储在附件存储目录中的,通过页面和附件 ID 进行识...

honeymose ⋅ 11分钟前 ⋅ 0

【每天一个JQuery特效】根据状态确定是否滑入或滑出被选元素

主要效果: 本文主要采用slideToggle()方法实现以一行代码同时实现以展开或收缩的方式显示或隐藏被选元素。 主要代码如下: <!DOCTYPE html><html><head><meta charset="UTF-8">...

Rhymo-Wu ⋅ 15分钟前 ⋅ 0

度量.net framework 迁移到.net core的工作量

把现有的.net framework程序迁移到.net core上,是一个非常复杂的工作,特别是一些API在两个平台上还不能同时支持。两个类库的差异性,通过人工很难识别全。好在微软的工程师们考虑到了我们顾...

李朝强 ⋅ 21分钟前 ⋅ 0

请不要在“微服务”的狂热中迷失自我!

微服务在过去几年一直是一个非常热门的话题(附录1)。何为“微服务的疯狂”,举个例子: 众所周知,Netflix在DevOps上的表现非常棒。Netfix可以做微服务。因此:如果我做微服务,我也将非常...

harries ⋅ 22分钟前 ⋅ 0

oAuth2 升级Spring Cloud Finchley.RELEASE踩坑分享

背景 6.19号,spring团队发布了期待已久的 Spring Cloud Finchley.RELEASE 版本。 重要变化: 基于Spring Boot 2.0.X 不兼容 Spring Boot 1.5.X 期间踩过几个坑,分享出来给大伙,主要是关于...

冷冷gg ⋅ 52分钟前 ⋅ 0

OSChina 周一乱弹 —— 理发师小姐姐的魔法

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @冰冰棒- :分享田馥甄的单曲《My Love》 《My Love》- 田馥甄 手机党少年们想听歌,请使劲儿戳(这里) @Li-Wang :哎,头发又长了。。。又要...

小小编辑 ⋅ 今天 ⋅ 8

Kafka1.0.X_消费者API详解2

偏移量由消费者管理 kafka Consumer Api还提供了自己存储offset的功能,将offset和data做到原子性,可以让消费具有Exactly Once 的语义,比kafka默认的At-least Once更强大 消费者从指定分区...

特拉仔 ⋅ 今天 ⋅ 0

NEO智能合约之发布和升级(二)

接NEO智能合约之发布和升级(一),我们接下来说说智能合约的升级功能。 一 准备工作 合约的升级需要在合约内预先设置好升级接口,以方便在升级时调用。接下来我们对NEO智能合约之发布和升级...

红烧飞鱼 ⋅ 今天 ⋅ 0

个人博客的运营模式能否学习TMALL天猫质量为上?

心情随笔|个人博客的运营模式能否学习TMALL天猫质量为上? 中国的互联网已经发展了很多年了,记得在十年前,个人博客十分流行,大量的人都在写博客,而且质量还不错,很多高质量的文章都是在...

原创小博客 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部