您现在的位置是:首页 > 文章详情

react-native-select-group-buttons-modal 纯RN实现一个多按钮选择Modal

日期:2019-02-14点击:336

转载请注明出处:王亟亟的大牛之路

开篇之前日常安利
https://github.com/ddwhan0123/Useful-Open-Source-Android (各种库的收纳,长期维护)

做这个东西的理由

最近公司的项目做了个通用组建,是RN提供给Native和Naive提供给RN多模块,多语言共用2个组件多东西,然后里面牵涉太多老代码和老业务的东西使得代码比较臃肿(还很LOW),然后又因为很多地方正在用又不能彻底干掉调整。
所以自己重写了下然后实现部分功能就有了这么个东西。

安装本库

$ npm install react-native-select-group-buttons-modal --save


使用本库

import RNSelectGroupButtonsModal from 'react-native-select-group-buttons-modal'; <RNSelectGroupButtonsModal settingBuild={this._settingBuild} onPaymentModeChanged={(item, index) => { this.setState({ selectText: JSON.stringify(item) }) }} data={this.initData()} closeButtonPress={(flag) => { this.setState({ selectorVisible: flag }) }} selectorVisible={this.state.selectorVisible}/>

运行示例

 npm install expo-cli --global //If you haven't installed it before git clone git@github.com:ddwhan0123/react-native-select-group-buttons-modal.git //clone git cd sample npm install expo start -c --localhost --ios

Android运行效果
androidSample.gif
iOS运行效果
iOS.gif

属性

settingBuild?:object

构造基本业务属性的对象,如果不传将有默认值如下

 _settingBuild = { backdropColor: '#303437', backdropOpacity: 0.2, animationIn: 'slideInUp', animationTime: 400,//Default animation duration hideOnBack: true, modalTitle: '支付方式',//Main title modalTips: '业务控制文字内容',Subheading closeWithOutSideClick: true,//Click on the grey area to close the bullet window submitText: '确定'//Bottom Button submit text };

onPaymentModeChanged?:(item, index) => void

按钮被选择后的数据回调,返回data数组的某个元素


data?:object[]

弹窗内部可选按钮的数据源,必须传


closeButtonPress?:(flag) => void

关闭按钮的回调


selectorVisible?:boolean

控制是否显示弹窗的flag


defaultMode?:object

默认被选中对象的


style

设置样式属性


SubmitButtonStyle

设置底部按钮属性


tipsColor

设置次标题字体颜色


hideCloseButton?:boolean

设置是否显示关闭按钮


defaultCloseIcon?:object

设置关闭按钮的Icon


closeWithOutSideClick?:boolean

设置是否点击外部关闭Modal

Licenses


  • MIT

关于对React-Native的理解

首先我觉得这个项目做到现在仍然有很多问题,使用起来还是有很多坑,但是社区的大兄弟们也一直有努力。
至于为啥还在这部分做没有去用Flutter去实现有2个原因

  • 业务需要
  • 老项目迁移成本过高

有问题欢迎沟通,必须注明来意
在这里插入图片描述

原文链接:https://yq.aliyun.com/articles/690376
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章