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

简介: 转载请注明出处:王亟亟的大牛之路开篇之前日常安利https://github.com/ddwhan0123/Useful-Open-Source-Android (各种库的收纳,长期维护)做这个东西的理由最近公司的项目做了个通用组建,是RN提供给Native和Naive提供给RN多模块,多语言共用2个组件多东西,然后里面牵涉太多老代码和老业务的东西使得代码比较臃肿(还很LOW),然后又因为很多地方正在用又不能彻底干掉调整。

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

开篇之前日常安利
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个原因

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

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

目录
相关文章
|
移动开发
RN开发快速切换底部导航时react-native-swiper轮播图组件白屏
RN开发快速切换底部导航时react-native-swiper轮播图组件白屏
332 0
RN开发快速切换底部导航时react-native-swiper轮播图组件白屏
|
11月前
|
移动开发 JavaScript 前端开发
|
移动开发 前端开发 JavaScript
RN仿微信app聊天|react native群聊|红包|朋友圈实例
RN原生app聊天应用RN_chatRoom,基于react-native+react-navigation+react+redux+react-native-image-picker等技术实现的仿微信界面聊天实例。
1963 0
|
移动开发 前端开发 Android开发
react-native自定义Modal、Dialog弹窗|RN原生android/ios弹窗
前段时间就有使用react开发过一些项目,发现react框架有些意思,当初就想着要学习下原生Native技术,最近空闲就一直在研究react-native技术,采坑了不少。一顿学习下来发现没有想象的难。
5787 0
|
移动开发 前端开发 容器
React-Native 学习第二天:初识RN的代码
忙碌了很久,业务工作终于可以稍稍轻松一点了,赶紧继续学习React-Native。初识RN,先来看看RN的最简单的页面结构吧。 打开index.ios.js页面: 第一句: import React, { Component } from 'react'; 这是RN 0.26后导入React的方式,这意思是,导入‘react’文件里export的一个默认的组件,将其命名为React以及Component这个非默认组件。
880 0
|
3天前
|
前端开发 JavaScript API
阿珊比较Vue和React:两大前端框架的较量
阿珊比较Vue和React:两大前端框架的较量
|
4天前
|
前端开发 测试技术 开发工具
探索前端框架React Hooks的优势与应用
本文将深入探讨前端框架React Hooks的优势与应用。通过分析React Hooks的特性以及实际应用案例,帮助读者更好地理解和运用这一现代化的前端开发工具。
|
4天前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
2天前
|
前端开发
React Hooks - useState 的使用方法和注意事项(1),web前端开发前景
React Hooks - useState 的使用方法和注意事项(1),web前端开发前景

热门文章

最新文章