内容简介:版权声明:本文为博主原创文章,允许转载,但请保留出处。 https://blog.csdn.net/ddwhan0123/article/details/87350792
版权声明:本文为博主原创文章,允许转载,但请保留出处。 https://blog.csdn.net/ddwhan0123/article/details/87350792
转载请注明出处:王亟亟的大牛之路
开篇之前日常安利
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运行效果
iOS运行效果
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个原因
- 业务需要
- 老项目迁移成本过高
有问题欢迎沟通,必须注明来意
以上所述就是小编给大家介绍的《react-native-select-group-buttons-modal 纯RN实现一个多按钮选择Modal》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 按钮穿透点击实现方式
- Vue 指令实现按钮级别权限管理
- 实现点击按钮后CSS加载效果
- 树莓派 GPIO按钮开关 原理与实现
- React:实现一个带有loading效果的按钮组件
- 如何实现登录、URL和页面按钮的访问控制?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。