react-native-element

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

Usage no npm install needed!

<script type="module">
  import reactNativeElement from 'https://cdn.skypack.dev/react-native-element';
</script>

README

react-native-element

库引入

1. ReactNative 项目引入

在项目 package.json 中 dependencies 增加依赖


"dependencies": {
    "react-native-element": "1.0.0",
},

2. 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两个平台