自定义组件全局使用(类似如下)

import { ReactNavComponent, Widget, Util } from 'rn-yunxi';
const { RegexpUtil, StorageUtil } = Util;
const { Button, Text } = Widget;

首先在项目中文件下新建rn-yunxi文件夹, 然后再package.json文件中导入 “rn-yunxi”: “file:./rn-yunxi”,

 "dependencies": {
"antd-mobile": "^1.4.2",
"autobind-decorator": "^2.1.0",
"events": "^1.1.1",
"mobx": "^3.3.1",
"mobx-react": "^4.3.4",
"rc-form": "^1.3.1",
"react": "16.0.0-alpha.6",
"react-native": "file:../rn-yunxi/react-native",
"rn-yunxi": "file:./rn-yunxi",
"vdjs": "^1.0.0"
},

然后在rn-yunxi声明一个index.js文件,用来导出你封装的组件类,注意导出写法 import * as 和  export

这里的*代表widget里面的所有组件和工具

import * as Widget from  './lib/widget';
import * as Util from './lib/util';
export {
Widget,
Util,
};

接下来开始写组建和公用方法 在Util中新建一个index.js导出你的组件

export { default as RegexpUtil } from './RegexpUtil';
export { default as DateUtil } from './DateUtil';

在Widget中新建一个index.js导出你的组件

export { default as Button } from './button';
export { default as Text } from './text';

然后在你项目中可以使用

import {Widget, Util } from 'rn-yunxi';
const { RegexpUtil, DateUtil } = Util;
const { Button, Text } = Widget;
原文链接:https://blog.csdn.net/weixin_40166364/article/details/78539352

(架构)React Native 导出项目全局共用组件的模块的更多相关文章

  1. React Native之本地文件系统访问组件react-native-fs的介绍与使用

    React Native之本地文件系统访问组件react-native-fs的介绍与使用 一,需求分析 1,需要将图片保存到本地相册: 2,需要创建文件,并对其进行读写 删除操作. 二,简单介绍 re ...

  2. React Native开源项目案例

    (六).React Native开源项目: 1.Pober Wong_17童鞋为gank.io做的纯React Native项目,开源地址:https://github.com/Bob1993/Rea ...

  3. React Native 开源项目汇总

    最近闲来无事,学习了React Native开发Android APP,自我感觉RN APP的效果和Native APP比还是蛮不错,以下是找到的一些优秀源码,仅供学习参考... React Nati ...

  4. React Native 之 项目实战(一)

    前言 本文有配套视频,可以酌情观看. 文中内容因各人理解不同,可能会有所偏差,欢迎朋友们联系我. 文中所有内容仅供学习交流之用,不可用于商业用途,如因此引起的相关法律法规责任,与我无关. 如文中内容对 ...

  5. React Native 系列(九) -- Tab标签组件

    前言 本系列是基于React Native版本号0.44.3写的.很多的App都使用了Tab标签组件,例如QQ,微信等等,就是切换不同的选项,显示不同的内容.那么这篇文章将介绍RN中的Tab标签组件. ...

  6. React Native入门教程2 -- 基本组件使用及样式

    在上一篇文章中,我们学会了如何搭建React Native的环境(React Native入门教程(笔记) 1 – 开发环境搭建),不知道你们是否搭建好了呢,如果还没有,那么快动起小手,来体验RN带给 ...

  7. React Native 二维码扫描组件

    学rn得朋友们,你们知道rn开源项目吗?来吧看这里:http://www.marno.cn/(rn开源项目) React Native学习之路(9) - 注册登录验证的实现 + (用Fetch实现po ...

  8. 【React Native开发】React Native控件之Image组件解说与美团首页顶部效果实例(10)

    ),React Native技术交流4群(458982758),欢迎各位大牛,React Native技术爱好者增加交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! Im ...

  9. React Native填坑之旅--组件生命周期

    这次我们来填React Native生命周期的坑.这一点非常重要,需要有一个清晰的认识.如果你了解Android或者iOS的话,你会非常熟悉我们今天要说的的内容. 基本上一个React Native的 ...

随机推荐

  1. Oracle开发:normal ,sysdba,sysoper区别

    Oracle将用户分成两类:[system]和[sys] [system]用户只能用normal身份登陆em.(可以看成公司的普通成员) [sys]用户具有“SYSDBA”(可以看成公司的CEO)或者 ...

  2. SQL Server CDC最佳实践

    企业核心业务系统oltp的数据需要通过ETL同步到数据仓库,原始的ETL流程通过定制化从SQL Server中进行数据抽取,经过生产环境的监控,发现ETL过程的query会对生产系统造成额外负载.于是 ...

  3. Make jQuery throw error when it doesn't match an element

    Make jQuery throw error when it doesn't match an element 解答1 You could make a plugin to use to ensur ...

  4. C# WPF 擦出效果,刮图效果

    找了很久 <Window x:Class="TestWebbowser.TestMaskWind" xmlns="http://schemas.microsoft. ...

  5. 浅谈移动端设备标识码:DeviceID、IMEI、IDFA、UDID和UUID -费元星

    在公司做数据分析的时候,发现NA端有很多ID,所有来系统的理解一下,有问题大家多指出   [心路历程] 最近刚好在思考工作中统计数据所用的标识码产生的数据误差到底有多大,借此机会几番搜索资料+请教大神 ...

  6. c++获取当前进程所在位置

    char buffer[MAX_PATH]; GetModuleFileNameA(NULL, buffer, MAX_PATH ); string::size_type pos = string( ...

  7. sql语句小记录

    测试过程中,需要去数据库中查询一些结果,比如验证码 常用的是查询 更新比较少用 删除一般不用 sql查询语句的嵌套用法,比较实用 比如in的用法:第一种:查询多个值时 SELECT "栏位名 ...

  8. python+ selenium&APPium自动化 page Object 设计模式

    题记: 之前公司项目比较稳定, 在进行了系统测试,想用自动化测试进行冒烟测试,或者对主要功能进行测试, 因此用到了PO模式 因此做个记录: Page Object Page Object模式是使用Se ...

  9. STM32 USB开发(三) 基于F105RBT6核心板开发的自定义HID收发(FS)

    硬件设计 该核心板的USB插口有两个,一个是用于USB Slave的,可以用来做HID设备,把模拟STM32模拟为U盘等:另一个是USB Host设备,可以对插上的U盘的数据进行读写. 图中J2是Mi ...

  10. selenium:css_selector定位详解(css selector和xpath的比较)

    selenium使用css selector和xpath的比较 selenium提供的定位方式(常用) ID NAME CLASS CSS SELECTOR XPATH   推荐的定位方式的优先级 优 ...