React Native实现一个自定义模块
概述
npm 使用介绍
npm -v
升级可以使用下面的命令
sudo npm install npm -g
安装模块(安装完毕后会产生一个node_modules目录,其目录下就是安装的各个node模块)
npm install <ModuleName>
其他的用法还请参考之前的博客:npm使用详解
今天我们要说的是用npm来创建一个我们自己的模块,就是Android的Libary
创建自定义模块
react-native init AwesomeProject
这里以 Android 为例,用 Android Studio 选择菜单 File->open 打开 AwesomeProject 文件夹下的 android 文件夹,然后选择 File -> New -> New Module,选择创建一个 Android Library,如图:
然后将所需要依赖的 jar 放到 libs 目录下,这里以使用 jpush-sdk 为例,将官网上下载的 libs 复制到 libs 下,把相关的资源文件放到 res 文件夹下,再把 AndroidManifest 文件内容复制过来,更改一下包名,最后在 build.gradle 中配置一下。
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 部分代码,我们如何才能在 JS 中让他人能够通过 import 的方式调用我们的 JS 代码,从而调用 Native 呢?首先进入 my-react-library 文件夹,然后在终端执行:
npm init
生成 package.json 文件(注意这里的 name 字段,这里是别人引用你的模块的名字),然后再创建一个 index.js 文件,这是 node 模块的 JS 入口。例如我引用了jpush
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(); } }
发布自定义模块
npm publish
这样就可以把我们的自定义模块上传到 npm 库了,每次更新版本时,需要改动 package.json 中的 version 值,然后再执行 npm publish 即可。
保存自定义模块
npm install my-react-library --save
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 中也要配置一下(这个搞过Android就很熟悉)
include ':app', ':my-react-library' project(':my-react-library').projectDir = new File(rootProject.projectDir, '../node_modules/my-react-library/android')
在 MainActivity 中将自定义的 Package 添加进去(因为启动时在这里触发的)
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 中添加
@Overrideprotected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new MyReactPackage() ); }
到此为止我们完成了 Native 部分的配置(完成后 sync 一下),接下来就可以使用了。
export default class SomeClass extends React.Component { componentDidMount() { // 调用 index.js 中定义的 doSomething() MyModule.doSomething(); } }
React Native实现一个自定义模块的更多相关文章
- 如何用 React Native 创建一个iOS APP?(二)
我们书接上文<如何用 React Native 创建一个iOS APP?>,继续来讲如何用 React Native 创建一个iOS APP.接下来,我们会涉及到很多控件. 1 AppRe ...
- 如何用 React Native 创建一个iOS APP?
诚然,React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 Reac ...
- 如何用 React Native 创建一个iOS APP?(三)
前两部分,<如何用 React Native 创建一个iOS APP?>,<如何用 React Native 创建一个iOS APP (二)?>中,我们分别讲了用 React ...
- React Native创建一个APP
React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 React 抽 ...
- React—Native开发之原生模块向JavaScript发送事件
首先,由RN中文网关于原生模块(Android)的介绍可以看到,RN前端与原生模块之 间通信,主要有三种方法: (1)使用回调函数Callback,它提供了一个函数来把返回值传回给JavaScript ...
- 从零学React Native之04自定义对话框
本篇主要介绍: 1. 自定义组件 2. Alert 对话框 自定义对话框 之前的我都是利用React Native提供的基础组件对它们进行排列组合, 其实自定义也很简单, 我们还是拿上一篇文章的例子进 ...
- 利用react native创建一个天气APP
我们将构建一个实列程序:天气App,(你可以在react native 中创建一个天气应用项目),我们将学习使用并结合可定义模板(stylesheets).盒式布局(flexbox).网络通信.用户输 ...
- React Native ——实现一个简单的抓取github上的项目数据列表
/** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; var React ...
- 如何在 React Native 中写一个自定义模块
https://my.oschina.net/jpushtech/blog/983230
随机推荐
- Bootstrap中关闭第二个模态框时出现的问题和解决办法
Bootstrap中关闭第二个模态框时出现的问题和解决办法 1.关闭第二个模态框时,第一个模态框跟着消失. 解决办法: 第二个模态框的代码不要写在第一个模态框里面,确保两个模态框相对独立; 2.关闭第 ...
- noip2017"退役"记
day0 口胡了一下去年的六道题,感觉很稳,看了6集动漫,0点钟就去睡了. day1 早上被一阵革命练习曲吵醒,而我还是窝在被子里不想起床(-﹃-)~zZ.于是室友开始放起了lost river... ...
- ●UOJ 21 缩进优化
题链: http://uoj.ac/problem/21 题解: ...技巧题吧 先看看题目让求什么: 令$F(x)=\sum_{i=1}^{n}(\lfloor a[i]/x \rfloor +a[ ...
- 51 nod 1427 文明 (并查集 + 树的直径)
1427 文明 题目来源: CodeForces 基准时间限制:1.5 秒 空间限制:131072 KB 分值: 160 难度:6级算法题 安德鲁在玩一个叫“文明”的游戏.大妈正在帮助他. 这个游 ...
- Codeforces Round #452 F. Letters Removing
Description Petya has a string of length n consisting of small and large English letters and digits. ...
- hdu 2865 Polya计数+(矩阵 or 找规律 求C)
Birthday Toy Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tota ...
- hdu2795 线段树 贴广告
Billboard Time Limit: 20000/8000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- 【集训第三天·疯狂训练】哦,顺带学习了manacher
虽然说是疯狂训练吧,但是也没写多少题,就把伸展树的操作熟悉了一下,ac了5个题目. 一整天没啥可吐槽的,除了昨天在机房打游戏的某位朋友翻车后和教练谈了谈心2333 说题吧.. 1.BZOJ1208 H ...
- 在右键中添加以管理员运行CMD命令提示符 (进化版)
直接代码,转过来的 20180316更新添加快捷键A,点右键按A即可: Windows Registry Editor Version 5.00 ; Created by: Shawn Brink ; ...
- 【js-xlsx和file-saver插件】前端导出数据到excel
最近在做项目,前端进行处理数据,导出excel中,还是遇到不少问题,这里将其进行总结一下,博主是vue框架开发,借用file-saver和xlsx插件进行导出excel,我们来看下代码和效果.地址链接 ...