(架构)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

原文地址:https://www.cnblogs.com/allenxieyusheng/p/11396999.html

时间: 2024-10-14 17:13:30

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

react native 使用 iOS 原生 UI 组件

目前 react native 的组件还是不多,有些也并不怎么好用,这时候就需要封装原生 UI 组件了 之前写过RN 与 native 的通信 无非就是两种: 1>>>  react native 内部事件需要通知 native 调用 native 的方法(或者传递RN 中的数据到 native),这时候可以用新建一个 manager 之类的文件 RCT_EXPORT_MOUDLE() 暴露 native类  ,RCT_EXPORT_METHOD () 暴露 native 方法给 js

关于React Native init 项目时候速度太慢的解决方法

因为init项目的时候需要下载资源,但又因为react native的网站被墙所以下载很慢,解决方法就是换成淘宝的NPM镜像 我是直接使用了命令去替换了NPM $ npm install -g cnpm --registry=https://registry.npm.taobao.org 这样一来,就会快很多了,实测,大概3分钟. 淘宝NPM地址:https://npm.taobao.org 如有错误,恳请指出.

【React Native开发】React Native控件之WebView组件详解以及实例使用(22)

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50676379 本文出自:[江清清的博客] (一)前言 [好消息]个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org 今天我们一起来看一下WebView组件讲解以及使用实例 刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同

React Native入门(三)组件的Props(属性)和State(状态)

相关文章 React Native入门系列 前言 在Android或者iOS开发中我们会用到很多控件,这些控件会有很多的属性.样式等等.同样的,React Native中的组件也有属性.样式和状态. 1.Props(属性) 组件创建时会设置一些参数来定制这个组件,这些参数就是属性,属性一旦设定,在组件的生命周期中就不会改变.下面拿Image的source属性和Text的onPress属性作为举例. Image的source属性 import React, {Component} from 're

【React Native开发】React Native控件之Text组件讲解-es6语法

Text组件为React中一个基本组件,和Android中的TextView组件相类似用来显示基本的文本信息,该控件除了基本的显示布局之外,可以进行嵌套显示,设置样式,以及可以做事件(例如:点击)处理.下面我们来一个实例: 1 import React, {Component} from 'react'; 2 import { 3 AppRegistry, 4 StyleSheet, 5 Text 6 } from 'react-native'; 7 8 class AndroidWdd03 e

React native 的弹出层组件使用

组件名称:Alert.AlertIOS  具体代码如下 /*弹出层测试*/ import React,{Component} from 'react'; import {   StyleSheet,   View,   Image,   Text,   TouchableOpacity,   ScrollView,   Navigator,   Alert, //引入Alert组件   TouchableHighlight,   AlertIOS  //引入AlertIOS组件 } from '

从零学React Native之09可触摸组件

可触摸组件有: TouchableHighlight,TouchableNativeFeedback,TouchableOpacity,TouchableWithoutFeedback 1. TouchableWithoutFeedback,在用户触摸的时候没有反馈任何触摸效果,体验很不好,基本很少使用. 2. TouchableNativeFeedback 是Android操作系统专用组件,使用原生控件相应的状态来展示, 比如5.0以上产生涟漪效果. 3. TouchableHighlight

React Native 之项目的启动

执行 react-native run-ios 命令 会开启一个本地服务,加载jsbundle文件,然后是去index.js文件 import {AppRegistry} from 'react-native'; import App from './App'; import {name as appName} from './app.json'; AppRegistry.registerComponent(appName, () => App); //展示App 组件 导入是这样,那么导出是怎

React Native安卓项目打包发布APK步骤

1.产生签名的key 该过程会用到keytool,开发过安卓的都应该接触过该东西.详细请见密钥和证书管理工具.在项目的主目录(不是android文件夹)中执行: --生成签名key,注意记下你的密钥和存储密码,后面配置文件需要使用 keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 --将keystore文件移动至and