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. 网络流Dinic--模板

    #define IOS ios_base::sync_with_stdio(0); cin.tie(0); #include <cstdio>//sprintf islower isupp ...

  2. PHP和js判断访问设备是否是微信浏览器实例

    PHP和js判断访问设备是否是微信浏览器实例,代码非常精简,适合新手学习. js判断是否是微信浏览器: 1 function is_weixin() { 2 var ua = window.navig ...

  3. Python3 + selenium + Chrome浏览器(webdriver.Chrome()报错)

    Python3 + selenium + Chrome浏览器 Error: selenium.common.exceptions.WebDriverException: Message: 'chrom ...

  4. 用python打开文件夹的三种方式

    一.利用explorer.exe import os # 利用explorer.exe执行 start_directory = r'C:\代码\软件包' os.system("explore ...

  5. Java组合模式(思维导图)

    图1 组合模式[点击查看图片] 1,以公司职员为例的结构 package com.cnblogs.mufasa.demo3; import java.util.ArrayList; import ja ...

  6. SpringCloud 随笔

    目录 服务间通讯 统一配置中心 RabbitMQ Spring Cloud Stream 服务网关 Spring Cloud Zuul ++==(纯手打,代码可能有错!)==++ 服务间通讯 Rest ...

  7. jQuery 手写菜单(ing)

    菜单支持多级 直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  8. 用表格制作商品购买页面--(table)

    实现效果如图: 首先来看布局,头部图片,内容从左到右分为四个部分   勾选+商品图片+商品名/买家+价格, 所以需要将头部用<td>包括起来,并且设置<td colspan=&quo ...

  9. c# 将datatable中的数据保存到excel文件中

    using System; using System.Collections.Generic; using System.Data; using System.IO; using System.Lin ...

  10. Webpack4 splitChunks配置,代码分离逻辑

    博客不知道啥时候写的了,一直在草稿箱没写完,突然感觉今年过去大半了,又没怎么写博客.写写完,有始有终 1.代码分离升级 原来项目代码分离是通过下面的配置,基于bundle-loader插件,通过rou ...