react-native-pg-utils

对react-native全局进行配置,对内置对象原型链增加方法,增加常用全局方法.

每次新建react-native项目之后都会发现有一些很常用的方法在这个项目中也会用到,有些对全局的配置(禁用模拟器上显示黄框,release发布版本中时console打印失效等).这些如果在新项目中在搞一次的话的确是很麻烦,所以我就将其封装成了这个库.

github地址: https://github.com/geek-prince/react-native-gp-utils

npm地址: https://www.npmjs.com/package/react-native-gp-utils

{{TOC}}

安装

npm install react-native-gp-utils --save

如何使用

首先导入插件

三种侵入式等级(根据情况选择其中一种方式导入)

  • 0:非侵入式:每个要用到的方法的文件中都要导入指定的工具类,并以工具类.方法名的方式调用方法.

    -- 优点:不会占用任何一个全局变量和任何一个内建对象(Array,String对象等)的prototype原型链属性,不会造成全局变量污染

    -- 缺点:每个要使用的文件都要导入相应的库文件,不方便

  • 1:部分侵入式(推荐):只用在入口文件中导入一次即可,并以工具类.方法名方式调用方法,内建对象以arr.unshiftFromIndex的形式调用.

    -- 优点:相对方便,只用入口文件导入一次,其他文件都可以使用.

    -- 缺点:会占用与各个工具类名相同的全局变量的属性(也可把各个工具类名定义为自定义的变量名),以及各个内建对象(Array,String对象等)的prototype原型链的与方法名相同的属性

  • 2:完全侵入式:只用在入口文件中导入一次即可,并以方法名方式直接调用方法,内建对象以arr.unshiftFromIndex的形式调用.

    -- 优点:非常方便,在入口文件中导入一次即可,在任何地方使用任何方法,只用直接用方法名就可以调用方法.

    -- 缺点:会占据各个工具类中所有和方法名相同的全局变量(会造成全局变量污染),和各个内建对象(Array,String对象等)的prototype原型链的与方法名相同的属性

三种侵入式等级分别导入插件的方式

导入库->设置配置选项(可选)->自定义各个库文件名(可选,在侵入式等级1中使用)->给出侵入式等级初始化

1.导入库

import GPUtils from 'react-native-gp-utils';

2.设置配置选项(可选)

GPUtils.configs={yellowBoxOn:true}; //这里设置打开警告提示黄框

3.自定义各个库文件名(可选,在侵入式等级1中使用)

//这里表示将CommonUtils,ArrayUtils工具类的名称分别自定义为CU,AU,没给出的按默认的工具类的名称.
GPUtils.namesMap={CommonUtils:'CU',ArrayUtils:'AU'};

4.给出侵入式等级初始化

4.1.以侵入式等级0初始化
// let {CommonUtils,ArrayUtils}=GPUtils.initWtihInvadeScale(0);
// 也可以向下面这样为之自定义名称
let {CommonUtils:CU,ArrayUtils:AU}=GPUtils.initWtihInvadeScale(0);
4.2.以侵入式等级1初始化(推荐)
GPUtils.initWtihInvadeScale(1); //自定义名称在上面第3步
4.3.以侵入式等级2初始化
GPUtils.initWtihInvadeScale(2); //完全侵入,不支持自定义名称(因为每个方法名都会成为全局变量)

可配置选项(上面第2步)

|:-----------

react-native-pg-utils(对react-native全局进行配置,对内置对象原型链增加方法,增加常用全局方法.)的更多相关文章

  1. Native VS H5 VS React Native

    现在软件行业已经跨入大前端时代,所以势必学一点前端的知识.本来移动端开发都是使用各自平台的语言,如iOS端使用OC,swift:Android使用java,但是随着H5的出现,导致移动端Native出 ...

  2. React 与 React Native 底层共识:React 是什么

    此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法,此小节主要介绍 React 的底层原理与 ...

  3. Hybrid APP基础篇(二)->Native、Hybrid、React Native、Web App方案的分析比较

    说明 Native.Hybrid.React.Web App方案的分析比较 目录 前言 参考来源 前置技术要求 楔子 几种APP开发模式 概述 Native App Web App Hybrid Ap ...

  4. 利用 Create React Native App 快速创建 React Native 应用

    本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...

  5. 2、手把手教React Native实战之从React到RN

    ###React简介 RN是基于React设计,了解React有助于我们开发RN应用: React希望将功能分解化,让开发变得像搭积木一样,快速而且可维护 React主要有如下3个特点: *作为UI( ...

  6. React Native 开发豆瓣评分(二)路由配置

    路由管理使用官方推荐的 React Navigation; 配置环境 安装相关依赖 yarn add react-navigation react-native-gesture-handler Lin ...

  7. React Canvas:高性能渲染 React 组

    React Canvas 提供了使用 Canvas 渲染移动 Web App 界面的能力,替代传统的 DOM 渲染,具有更接近 Native App 的使用体验.React Canvas 提供了一组标 ...

  8. (转)2019年 React 新手学习指南 – 从 React 学习线路图说开去

    原文:https://www.html.cn/archives/10111 注:本文根据 React 开发者学习线路图(2018) 结构编写了很多新手如何学习 React 的建议.2019 年有标题党 ...

  9. 使用react搭建组件库:react+typescript+storybook

    前期准备 1. 初始化项目 npx create-react-app react-components --template typescript 2. 安装依赖 使用哪种打包方案:webpack/r ...

随机推荐

  1. 剑指offer14:输入一个链表,输出该链表中倒数第k个结点。

    1. 题目描述 输入一个链表,输出该链表中倒数第k个结点. 2. 思路和方法 可以用两个指针,一个指针遍历到第k个结点的时候,第二个指针再走到第一个节点,然后两个指针的距离始终保持k-1.这样,当第一 ...

  2. Python 基础(十六)--随机数模块

    random随机数模块 random.randint(1,10):随机1-10包括10 random.randrange(1,10,2):在1.3.5.7.9中随机,类似切片,不包括10 random ...

  3. Pygame小游戏练习四

    @Python编程从入门到实践 Python项目练习 九.添加Play按钮 一.创建Button类 先让游戏一开始为非活动状态 # game_stats.py # --snip-- self.game ...

  4. global和nonlocal的区别

    global可以在任何地方修饰变量,而且被global修饰的变量直接被标识为全局变量,对该变量修改会影响全局变量的值,但不影响函数中未被global修饰的同名变量(依然是局部变量),nonlocal只 ...

  5. 面试官:Kafka 如何优化内存缓冲机制造成的频繁 GC 问题?

    Jusfr 原创,转载请注明来自博客园 Request 与 Response 的响应格式 Request 与 Response 都是以 长度+内容 形式描述, 见于 A Guide To The Ka ...

  6. java lesson10homework

    1.    输入三个整数x, y, z,请把这三个数由小到大输出. 2.  package Homework10; 3.  //:类方法 4.  public class Sort { 5.  voi ...

  7. js实现div转图片并保存

    最近工作中遇到的需求,将div转成图片并保存. 1.准备需要用到的js插件jquery-1.8.2.js,html2canvas.min.js(将div转换为canvas),bluebird.js(用 ...

  8. connect() failed (111: Connection refused) while connecting to upstream的解决

    遇到这种情况, 首先 1.检查php-fpm是否启动---------如果没启动->启动, 2.用命令 netstat -ant | grep 9000 查看php-fpm进程,如果没启动-&g ...

  9. 小程序 wxs时间戳转字符串

    function formatDate(value) { //不能使用 new Date() var time = getDate(value); var year = time.getFullYea ...

  10. libusb移植

    下载 https://sourceforge.net/projects/libusb/ 编译 # ./configure --build=i686-linux --host=arm-linux --p ...