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

爱被打了一巴掌 2022-02-14 14:55 216阅读 0赞

### 转载请注明出处：[王亟亟的大牛之路][Link 1] ###

开篇之前日常安利  
[https://github.com/ddwhan0123/Useful-Open-Source-Android][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个原因

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

有问题欢迎沟通，必须注明来意  
![在这里插入图片描述][20190215120336855.jpeg]

[Link 1]: https://blog.csdn.net/ddwhan0123
[https_github.com_ddwhan0123_Useful-Open-Source-Android]: https://github.com/ddwhan0123/Useful-Open-Source-Android
[androidSample.gif]: /images/20220214/0815bec97f784b128d087bf02960648c.png
[iOS.gif]: /images/20220214/c7a4c9c94faf4a1f94b82bf93e2a78c0.png
[20190215120336855.jpeg]: /images/20220214/c13659c55eb5432bace82c90621dec74.png