react-native-select-group-buttons-modal 纯RN实现一个多按钮选择Modal
转载请注明出处：王亟亟的大牛之路
开篇之前日常安利
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 --iosAndroid运行效果
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个原因
- 业务需要
- 老项目迁移成本过高
有问题欢迎沟通，必须注明来意
