(架构)React Native 导出项目全局共用组件的模块
自定义组件全局使用(类似如下)
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 导出项目全局共用组件的模块的更多相关文章
- React Native之本地文件系统访问组件react-native-fs的介绍与使用
React Native之本地文件系统访问组件react-native-fs的介绍与使用 一,需求分析 1,需要将图片保存到本地相册: 2,需要创建文件,并对其进行读写 删除操作. 二,简单介绍 re ...
- React Native开源项目案例
(六).React Native开源项目: 1.Pober Wong_17童鞋为gank.io做的纯React Native项目,开源地址:https://github.com/Bob1993/Rea ...
- React Native 开源项目汇总
最近闲来无事,学习了React Native开发Android APP,自我感觉RN APP的效果和Native APP比还是蛮不错,以下是找到的一些优秀源码,仅供学习参考... React Nati ...
- React Native 之 项目实战(一)
前言 本文有配套视频,可以酌情观看. 文中内容因各人理解不同,可能会有所偏差,欢迎朋友们联系我. 文中所有内容仅供学习交流之用,不可用于商业用途,如因此引起的相关法律法规责任,与我无关. 如文中内容对 ...
- React Native 系列(九) -- Tab标签组件
前言 本系列是基于React Native版本号0.44.3写的.很多的App都使用了Tab标签组件,例如QQ,微信等等,就是切换不同的选项,显示不同的内容.那么这篇文章将介绍RN中的Tab标签组件. ...
- React Native入门教程2 -- 基本组件使用及样式
在上一篇文章中,我们学会了如何搭建React Native的环境(React Native入门教程(笔记) 1 – 开发环境搭建),不知道你们是否搭建好了呢,如果还没有,那么快动起小手,来体验RN带给 ...
- React Native 二维码扫描组件
学rn得朋友们,你们知道rn开源项目吗?来吧看这里:http://www.marno.cn/(rn开源项目) React Native学习之路(9) - 注册登录验证的实现 + (用Fetch实现po ...
- 【React Native开发】React Native控件之Image组件解说与美团首页顶部效果实例(10)
),React Native技术交流4群(458982758),欢迎各位大牛,React Native技术爱好者增加交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! Im ...
- React Native填坑之旅--组件生命周期
这次我们来填React Native生命周期的坑.这一点非常重要,需要有一个清晰的认识.如果你了解Android或者iOS的话,你会非常熟悉我们今天要说的的内容. 基本上一个React Native的 ...
随机推荐
- A - 地震预测
A - 地震预测 怀特先生是一名研究地震的科学家,最近他发现如果知道某一段时间内的地壳震动能量采样的最小波动值之和,可以有效地预测大地震的发生. 假设已知一段时间的n次地壳震动能量的采样值为a1,a2 ...
- java生成二维码学习笔记
纠错等级: QRErrorCorrectLevel.L 7%的字码可被修正 QRErrorCorrectLevel.M 15%的字码可被修正 QRErrorCorrectLevel.Q 25%的字码可 ...
- Go开发[八]goroutine和channel
进程和线程 进程是程序在操作系统中的一次执行过程,系统进行资源分配和调度的一个独立单位. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位. 一个进程可以创 ...
- 2018 icpc 沈阳
https://codeforces.com/gym/101955 J 签到 #include<iostream> #include<cstring> #include< ...
- spring的组件工厂后置处理器——BeanFactoryPostProcessor
作用和调用时机 spring有两种后置处理器: 1. 组件后置处理器——org.springframework.beans.factory.config.BeanPostProcessor: 2. 工 ...
- Android:adb shell 命令详解
安卓系统是基于Linux系统开发,也就支持常见的Linux的命令,这些命令都保存在手机“/system/bin”的目录下,通过adb shell 便可以调用这些命令. 进入“/system/bin”该 ...
- Scratch少儿编程系列:(八)演奏简单音乐
一.程序说明 本程序,用来演奏简单音乐. 二.制作过程 1. 场景和角色的选择 场景选择“音乐和舞蹈”主题下的“party root”,角色沿用默认角色,如下图: 选择后效果如下图: 2. 切换到“脚 ...
- 【Qt开发】Qt测试计算时间
方法1 利用QTime,其精度为ms级 </pre><pre code_snippet_id="1852215" snippet_file_name=" ...
- 使用powershell管理Docker Toolbox
打开PowerShell,输入: docker-machine ls 我们可以看到我们当前的Docker虚拟机的状态.如果什么都没有的话,那么我们可以使用以下命令创建一个Docker虚拟机. dock ...
- 20191112 Spring Boot官方文档学习(4.5-4.6)
4.5.国际化 Spring Boot支持本地化消息,因此您的应用程序可以迎合不同语言首选项的用户.默认情况下,Spring Boot messages在类路径的根目录下查找message resou ...