BenitoJedai/react-native-easy-app

react-native-easy-app （RN开发一站式解决方案）

安装

npm install react-native-easy-app --save

或者

yarn add react-native-easy-app

功能点

支持快捷[同步]访问AsyncStorage
支持灵活、可配置的Http请求
灵活的基础控件(无感知多屏适配)

快速开始

详细使用方法，请参考示例项目 Sample, Sample_MobX, Sample_Redux

您也可以参考文章对react-native-easy-app使用介绍：简书

用AsyncStorage快速实现一个可持久化的数据存、取管理器

   export const RNStorage = {// RNStorage 自定义数据存储对象
       token: undefined, //  字符串类型
       isShow: undefined, // 布尔类型
       userInfo: undefined, // 对象类型
   };

  import { XStorage } from 'react-native-easy-app';
   
  const initCallback = () => {
  
       // 现在起，你可以同步读、写RNStorage中的任何属性了
       
       console.log(RNStorage.isShow); // 相当于 [ console.log(await AsyncStorage.getItem('isShow')) ]
       
       RNStorage.token = 'TOKEN1343DN23IDD3PJ2DBF3=='; // 相当于 [ await AsyncStorage.setItem('token',TOKEN1343DN23IDD3PJ2DBF3==') ]
       
       RNStorage.userInfo = {name: 'rufeng', age: 30}; // 相当于 [ await AsyncStorage.setItem('userInfo',JSON.stringify({ name:'rufeng', age:30})) ] 
  };
  
  XStorage.initStorage(RNStorage, initCallback);

XStorage 对象

方法	参数	返回值类型	描述
initStorage	(targetObj, initCallback, dataCallback?, version?, storageImp?)	void	将【targetObj】对象中的属性与【AsyncStorage】中的字段建立映射，形成绑定关系
initStorageSync	(targetObj, dataCallback?, version?, storageImp?)	Promise	以Promise形式将【targetObj】与【AsyncStorage】建立绑定关系
multiGet	keys :string[]	Promise<[string, string][]>	等价于 AsyncStorage.multiGet()
saveItems	keyValuePairs :string[][]	Promise	等价于 AsyncStorage.multiSet()
removeItems	keys :string[]	Promise	等价于 AsyncStorage.multiRemove()
clear	none	void	等价于 AsyncStorage.clear()

XStorage.initStorage 方法参数描述：

参数名	形式	描述
storageObj :object	{ token:undefined, userName:undefined, ...}	需要持久化的数据列表对象
initializedFunc :callback function	()=>{ ... }	持久化映射成功成功后的回调
dataChangedFunc ?:callback function	(dataSet)=>{ ... }	持久化数据变更后的回调
version ?:string	'1.0'	数据存储版本控制(默认:1.0)
storageImp ?:AsyncStorage	AsyncStorage	数据持久化实现基础(默认为:AsyncStorage from 'react-native')

支持可配置的Http请求

一切基于配置（配置可选，自由设定）

import { XHttpConfig, XHttpConst } from 'react-native-easy-app';

 XHttpConfig().initHttpLogOn(true)
              .initBaseUrl('https://www.baidu.com')
              .initTimeout(15000)
              .initContentType(XHttpConst.CONTENT_TYPE_URLENCODED)
              .initLoadingFunc((isLoading)=>{
                 ...
              })
              .initHeaderSetFunc((headers, request) => {
                 ...
              })
              .initParamSetFunc((params, request) => {
                 ...
              })
              .initParseDataFunc((result, request, callback) => {
                 let {success, json, response, message, status} = result;
                 ...
               }
          );

XHttpConfig 对象（所有方法都是可选的）

方法	参数	返回类型	描述
constructor	serverTag ?:string	XHttpConfig Builder	与XHttp(serverTag)保持一致(用于多服务器请求配置)，默认为空
initBaseUrl	baseUrl :string	XHttpConfig Builder	设置Http请求公共的BaseUrl
initTimeout	timeout :number	XHttpConfig Builder	设置公共的默认请求超时时间
initHttpLogOn	logOn :bool	XHttpConfig Builder	设置是否打印Http请求日志
initContentType	contentType :string	XHttpConfig Builder	设置Http请求默认的ContentType
initLoadingFunc	(isLoading) => {...}	XHttpConfig Builder	Http公共请求状态回调，isLoading为true表示请求进行中
initHeaderSetFunc	(headers, request) => {...}	XHttpConfig Builder	请求header设置拦截器；可在此处，为请求添加公共的headers参数
initParamSetFunc	(params, request) => {...}	HttpRequest Builder	请求body(params)设置拦截器；可在此处，为请求添加公共的params参数
initParseDataFunc	(result, request, callback) => {...}	XHttpConfig Builder	请求回调拦截器；可在此处，为接口返回数据做公共解析处理
initEncodeURIComponent	encodeComponent :boolean	HttpRequest Builder	全局设置是否对参数进行encodeURLComponent编码

发送请求模板

   import { XHttp } from 'react-native-easy-app';

   let url = 'v1/account/login/';
   let param = { phone: '18600000000', authCode: '123456'};
   let header = { Authorization: "Basic Y3Rlcm1pbmF......HcVp0WGtI"};
   let callback = () => (success, json, message, status, respoonse) => {
        if (success) {
           showToast(JSON.stringify(json))
        } else {
           showToast(msg)
        }
   };

   * 可设置的参数以builder形式拼接
   XHttp().url(url)
       .header(header)
       .param(param)
       .internal(true)
       .rawData()
       .pureText()
       .timeout(10000)
       .extra({tag: 'xx'})
       .contentType('text/xml')
       .encodeURLComponent(true)
       .loadingFunc((loading)=> showLoading('请求中，请稍候...', loading))
       .rawData()
       .pureText()
       .configCommonFunc(true,true)
       .[formJson|formData|formEncoded]()
       .[get|post|put|patch|delete|options]((success, json, message, status, respoonse)=>{
         ...
       });

HttpRequest 对象

方法	参数	返回类型	描述
constructor	serverTag :string	HttpRequest Builder	与XHttpConfig(serverTag)保持一致(用于多服务器请求配置)，默认为空
url	url :string	HttpRequest Builder	设置请求的url；若XHttpConfig中配置了baseUrl，当前只需要配置接口url后缀即可
header	{ Accept, Authorization ... } :object	HttpRequest Builder	设置当前请求的header参数；若与XHttpConfig中配置的公共header参数同名，则以当前设置为准
param	{ userName, password, customerId ... } :object	HttpRequest Builder	设置当前请求的params参数；若与XHttpConfig中配置的公共params参数同名，则以当前设置为准
contentType	contentType :string	HttpRequest Builder	设置当前请求的ContentType；若XHttpConfig中设置公共的ContentType，则以当前设置为准
internal	internal :bool	HttpRequest Builder	用于请求区别标记，默认为true；通常在XHttp中传入，在XHttpConfig的回调拦截器中使用，拦截器的request中可取该值
extra	{customTag ...}	HttpRequest Builder	用于请求区别标记，通常在XHttp中传入，在XHttpConfig的回调拦截器中使用，拦截器的request中可取该值
timeout	timeout :number	HttpRequest Builder	设置当前请求的超时时长，单位毫秒
loadingFunc	(isLoading)=>{ ... }	HttpRequest Builder	当前接口请求状态回调；isLoading为true表示请求进行中
configCommonFunc	( enableHeaderFunc :bool, enableParamFunc :bool )	HttpRequest Builder	设置在XHttpConfig添加的[initHeaderSetFunc] [initParamSetFunc]是否生效，默认为true（生效）
encodeURLComponent	encodeComponent :boolean	HttpRequest Builder	设置是否对参数进行encodeURLComponent编码
rawData	none	HttpRequest Builder	设置返回的接口数据是否为原始未处理过的数据；若调用，则会忽略XHttpConfig中设置[initParseDataFunc]函数作用
pureText	none	HttpRequest Builder	设置返回的接口数据是否为纯文本数据（框架默认为接口为json数据，若后台返回的数据为非json结构时间使用：如 XML 格式
formJson	none	HttpRequest Builder	等价于设置当前接口请求类型 ( headers['Content-Type'] = 'application/json' )
formData	none	HttpRequest Builder	等价于设置当前接口请求类型 ( headers['Content-Type'] = 'multipart/form-data' )
formEncoded	none	HttpRequest Builder	等价于设置当前接口请求类型 ( headers['Content-Type'] = 'application/x-www-form-urlencoded' )
get	(success, json, message, status ,response) => void	void	get 请求及回调
post	(success, json, message, status ,response) => void	void	post 请求及回调
options	(success, json, message, status ,response) => void	void	options 请求及回调
put	(success, json, message, status ,response) => void	void	put 请求及回调
delete	(success, json, message, status ,response) => void	void	delete 请求及回调
patch	(success, json, message, status ,response) => void	void	patch 请求及回调
request	(method, (success, json, message, status ,response) => void )	void	以指定的请求method，发送请求并回调
execute	method :string	Promise	以指定的请求method，发送请求并返回一个Promise对象
fetch	method :string	Promise	以指定的请求method，发送请求并返回一个Promise对象，返回的数据不做任何处理，以RN原生fetch的方式结果原样返回

new HttpRequest() ==> XHttp()

推荐通过 XHttp() 的形式来发送Http请求会更便捷

发送请求

同步请求

   import { XHttp } from 'react-native-easy-app';
   
   const url = 'https://www.google.com';
  
   const result = await XHttp().url(url).execute('GET');
   const {success, json, message, status, response} = result;
   
   if(success){
      this.setState({content: JSON.stringify(json)})
   } else {
      showToast(message)
   }

异步请求方式1

   XHttp().url(url).get((success, json, message, status, response)=>{
       if (success){
          this.setState({content: JSON.stringify(json)});
       } else {
          showToast(msg);
       }
   });

异步请求方式2

   XHttp().url(url).execute('GET').then(({success, json, message, status, response}) => {
       if (success) {
            this.setState({content: JSON.stringify(json)});
       } else {
            showToast(message);
       }
    })

灵活的基础控件

   XImage
   XText
   XView
   
   XFlatList
   
   XWidget
   .initResource(AssetsBaseUrl)    // XImage组件的icon属性的uri前缀
   .initReferenceScreen(375, 677); // UI 整体尺寸缩放参考屏幕尺寸

XView，XImage，XText都包含raw属性，若raw值为true，则会忽略XWidget.initReferenceScreen( referenceWidth, referenceHeight )的设置：不自动处理多屏尺寸适配

XView 组件

属性	类型	描述
raw	bool	默认为false，若为true则不会自动处理多屏幕尺寸适配
...	...	若包含onPress或onLongPress属性，则等同于TouchableXXX系列组件,否则等同于View组件,并拥有其相应的属性

XImage Object

属性	类型	描述
raw	bool	默认为false，若为true则不会自动处理多屏幕尺寸适配
icon	string	相当于Image的source属性，可以接受的参数格式如：[https://xxx.yy.com/image.jpg]，[data: image / png; base64, iVBORw0KGgoAAAAN ...]，[require ('./ image.jpg')]
iconSize	number	图标的尺寸，优先级高于style的width与height
...	...	如果设置了onPress和onLongPress函数，XImage将被XView包裹，并且外部传入的属性将会自动被分配给正确的控件

XText 组件

属性	类型	描述
raw	bool	默认为false，若为true则不会自动处理多屏幕尺寸适配
text	string	文本
textExtend	bool	如果包含图标，则等效于将Text组件设置属性: {flex:1}
icon	string	相当于Image的source属性，可以接受的参数格式如：[https://xxx.yy.com/image.jpg]，[data: image / png; base64, iVBORw0KGgoAAAAN ...]，[require ('./ image.jpg')]
iconSize	number	图标尺寸
iconMargin	number	图标与文本之间的距离
iconPosition	string	图标在当前控件中的位置，可以设置的值有： 'top', 'right', 'bottom', 'left'
...	...	如果设置了onPress和onLongPress函数，XImage将被XView包裹，并且外部传入的属性将会自动被分配给正确的控件

XFlatList 组件

属性	类型	描述
data	array	相当于FlatList组件的data属性
noDataText	string	若数据为空时展示的文本
noDataImage	uri	若数据为空时展示在文本下的图片
indicatorOffset	number	下拉刷新loading指示器距顶部的距离
refreshStatus	object	XFlatList列表在不同刷新状态展示的UI样式及文本设置对象
onRefresh	() => {...}	相当于FlatList控件的onRefresh属性
onLoadMore	() => {...}	当列表滚动到底部，被执行的回调方法（需要加载更多数据时）
emptyViewHeight	number	无数据时，空View的高度
...	...	FlatList组件的所有剩余属性

FlatList 组件刷新状对象示例

 const RefreshStatus = {
   Idle: {}, //闲置状态
 
   RefreshingData: {image: ImageRes.loading, text: '加载中，请稍候...'}, //下拉刷新中..
   NoData: {image: ImageRes.noData, text: '加载完成，无数据'}, //下拉刷新（无数据）
   LoadFailure: {image: ImageRes.loadFail, text: '加载失败'}, //下拉刷新（加载失败）
 
   LoadingMoreData: {moreText: '数据加载中…'}, //加载更多,进行中...
   NoMoreData: {moreText: '已加载全部数据'}, //加载更多（无数据）
   LoadMoreFailure: {moreText: '点击重新加载'}, //加载更多（加载失败）
   
   NetException: {text: '网络异常', moreText: '网络异常，点击重试'}, // 网络异常
 }

详细使用方法，请参考示例项目 Sample, Sample_MobX, Sample_Redux

您也可以参考文章对react-native-easy-app使用介绍：简书

BenitoJedai / react-native-easy-app

react-native-easy-app （RN开发一站式解决方案）

安装

功能点

快速开始

About

Languages

react-native-easy-app （RN开发 一站式解决方案）

安装

功能点

快速开始

About

Languages

react-native-easy-app （RN开发一站式解决方案）