react-native-element

react native 前端框架以及组件和API

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-native-element
1.2.15 years ago5 years agoMinified + gzip package size for react-native-element in KB

Readme

react-native-element

库引入

  1. ReactNative 项目引入

在项目 package.json 中 dependencies 增加依赖
"dependencies": {
    "react-native-element": "1.0.0",
},
  

  1. iOS项目引入

【注】目前该框架已经开发完毕,正在准备开源工作,故还有一些改动,所以目前项目还会有微小改动,但是改动均为向下兼容,请放心使用
【注】项目稳定后将会发布到 pod,目前以 git 地址直接引入
1、 整包引入
pod 'ReactNativeElement', :git => "https://github.com/TieShanWang/react-native-element"

2、 按需引入
# React Core
pod 'ReactNativeElement', :git => "https://github.com/TieShanWang/react-native-element", :subspecs => [
	# 核心组件
	'ECore',
	# 图片预览组件
	'EPreviewImage'
	# ...
]

3.安卓项目引入

安卓原生代码正在整理中,近期将会发布

介绍

【注】框架已经将 ReactNative 在APP端的应用实现类微信小程序,以下简称 RN小程序,将不再称为ReactNative。
【注】每个模块将会提供相应的开发文档
  • 原生框架

1. 已经将 ReactNative 小程序化

2. 支持以URL链接方式打开RN小程序。
例如:EMini://login_module?page=login&debug=true&debugIp=192.168.0.101&debugPort=8081
将会打开RN小程序登录模块->登录页面
并自动打开调试模式,调试IP为:192.168.0.101 调试端口为:8081

3. 支持使用Safari打开APP,并跳转到RN小程序

4. 已经实现小程序自动下载包,并实现了版本自动更新功能。在打开RN小程序和APP后台到前台切换时均会自动更新RN小程序

5. RN 小程序更新的维护在一个更新队列中,并且做了线程保护,
故可以同时更新多个小程序
可以同时多次调用同一个小程序的更新方法
并且每个小程序的更新均有进度回调,可以自定义更新进度UI等

7. 框架内部已经支持代码差量合并功能,只需要按照内部定义好的数据结构返回即可实现在线热更新

8. 提供了用户信息权限管理API

  • 网络模块 EMiniNet

1. 对接RN原生网络请求,提供 get post download 常用方法
2. 自动解析网络返回数据,自动对数据合法性校验
3. 自动 token 检测
4. 提供网络模块钩子

  • 按钮 EButton

实现了高亮效果,采用遮罩实现,并且使用动画显示遮罩,实现高质量用户体验
支持跳转遮罩颜色与透明度,默认黑色,为大众风格,类iOS原生
支持正常态、高亮态、不可用态
支持设置各种状态下的标题、背景图片、背景色、边框等

  • 图片 EImage (最强大的图片组件)

布局只需要当做 View 布局即可,无需关心图片大小不受的问题
支持自定义图片比例,自动按照比例调整高度
支持子内部添加元素节点
便捷支持设置填充模式
支持设置占位图
支持设置占位图填充模式
支持点击事件回调 onPress
便捷支持设置请求头、请求体、请求方法
便捷支持设置缓存协议

  • 滚动视图 EScrollView

原生已经直接更改下拉刷新为 MJRefresh
提供教程如何更改下拉刷新效果,做到与项目原生项目一致
设置 onRefresh 回调函数则存在下拉刷新功能,否则不存在
无需任何标志位标识是否正在刷新
onRefresh 回调参数 end(函数),调用 end 即可停止刷新

  • 列表视图 EListView

原生已经直接更改下拉刷新为 MJRefresh
提供教程如何更改下拉刷新效果,做到与项目原生项目一致
设置 onRefresh 回调函数则存在下拉刷新功能,否则不存在
无需任何标志位标识是否正在刷新
onRefresh 回调参数 end(函数),调用 end 即可停止刷新
设置 onLoading 回调函数则存在上拉加载功能,否则不存在
无需任何标志位标识是否正在加载
onLoading 回调参数 end(函数),调用 end 即可停止加载

  • 键盘遮挡问题

1. 已经从原生更改 ReactNative 源码解决掉了键盘遮挡问题

2. 将 TextInput 放置 ScrollView 中效果更佳
建议 TextInput 的父视图中存在 ScrollView

3. TextInput 组件支持属性 props isAvoidKeyBoard: boolean 关闭此功能

4. TextInput 组件支持属性 props avoidKeyBoardDistance: number 设置输入框到键盘顶部的距离

  • EWebView

1. 主要解决了网页加载出错的情况下,抛出来的异常直接遮挡整个网页的问题
2. 提供便捷注入JS的API

  • 图片预览 EPreViewImage

1. 提供了全局的API,在任何地方可以调起预览功能

se.preView()

2. 提供了图片预览UI组件,一行代码引入视图即可使用提供的相关API

  • 提示框 EHint

1. 样式仿微信
2. 一行代码引入单个页面,即可使用提供的API调起提示框
3. 提供了全局API,可以在任何地方直接调起提示框
4. 支持提示语
5. 支持loading

se.makeHint()
se.makeActivity()

  • 弹框 EAlert

1. UI样式与iOS原生
2. 支持设置每个按钮以及文本样式
3. 一行代码引入单个页面,即可使用提供的API调起提示框
4. 提供了全局API,可以在任何地方直接调起提示框

se.alert()

  • 底部弹出选择框 EAlertSheet

1. UI样式与微信一致
2. 支持设置提示语
3. 支持设置每个按钮以及文本样式
4. 一行代码引入单个页面,即可使用提供的API调起提示框
5. 提供了全局API,可以在任何地方直接调起提示框

se.alertSheet()

  • 日志 ELogger

支持 info error warn 三种日志打印
原生同步日志打印
原生暴漏API可以监控RN小程序日志
提供全局API打印日志 
se.logger.info
se.logger.error
se.logger.warn

  • 多页面管理控制器 EPage

1. 管理多个页面,类似与 tabbar ,切换栏在顶部
2. 无需任何字段控制当前页面显示
3. 每个页面内容只需要使用 EPageItem 包裹即可
4. 无需额外参数设置工具栏中的文本,只需指定 EpageItem.label 即可

<EPage>
	<EPageItem label={'第一个页面'}>
		<Text>第一个页面</Text>
	</EpageItem>
	<EPageItem label={'第二个页面'}>
		<Text>第二个页面</Text>
	</EpageItem>
	<EPageItem label={'第三个页面'}>
		<Text>第三个页面</Text>
	</EpageItem>
</EPage>

  • EPickView

1. 提供全局的API直接调起选择器
2. 一行代码引入单个页面,即可使用提供的API调起提示框
3. 同步实现了安卓和iOS两个平台

  • 文件管理器 EFileManager

1. 提供文件管理功能
2. 为每个RN小程序提供自己的文件存储区域,保护小程序安全
3. 支持创建文件夹、删除文件/文件夹、拷贝文件、移动文件/文件夹的功能

  • key-value存储器 EStorageAsync

1. 提供key-value存储
2. 为每个RN小程序提供自己的key-value存储区域,保护小程序安全
3. 支持对象、字符串、布尔、数字类型

  • 时间选择器 EDatePick

1. 提供全局的API直接调起时间选择器
2. 一行代码引入单个页面,即可使用提供的API调起时间选择器
3. 同步实现了安卓和iOS两个平台