Swiper中文论坛

标题: react-native仿原生弹窗|RN自定义弹窗组件 [打印本页]
作者: xiaoyan2015    时间: 2019-8-9 11:29
标题: react-native仿原生弹窗|RN自定义弹窗组件
本帖最后由 xiaoyan2015 于 2019-8-9 11:30 编辑

最近疯狂的迷上了react原生开发，捣鼓了好几天，采坑了不少，想着进一步提升下技术，就开发了个RN自定义弹窗组件rnPop.js
rnPop是一个基于React/React-Native技术高自定义Modal模态框，功能效果有些类似android、ios、微信弹窗效果。结合了原生Modal及react能力，使得弹窗高度耦合自定义参数，代码结构优雅、简洁。

预览图：








目录结构：


调用方式：
  1. // 引入rnPop.js组件
  2. import RNPop from '../utils/rnPop/rnPop.js'

  4. render() {
  5.     return (
  6.         <View style={styles.container}>
  7.             ...

  9.             {/* 引入弹窗模板 */}
  10.             <RNPop ref="rnPop" />
  11.         </View>
  12.     )
  13. }

  15. 显示：this.refs.rnPop.show({...options});
  16. 隐藏：this.refs.rnPop.hide();
复制代码
如果觉得上面调用方式不够优雅，也可以通过react全局变量控制， 如使用rnPop({…options}) 、 rnPop.close()方式进行弹窗调用
  1. /**************************
  2. *    实例化弹窗接口
  3. */
  4. const Popup = (args) => {
  5.     RNPop.show(args)
  6. }
  7. Popup.close = () => {
  8.     RNPop.close()
  9. }
  10. global.rnPop = Popup
复制代码
  1. //msg提示
  2. handlePress01 = ()=> {
  3.         rnPop({
  4.                 content: 'msg消息提示框（5s后窗口关闭）',
  5.                 shade: true,
  6.                 shadeClose: false,
  7.                 time: 5,
  8.                 xtime: true,
  9.                 anim: 'fadeIn',
  10.         });
  11. }

  13. //msg提示(黑色背景)
  14. handlePress02 = ()=> {
  15.         rnPop({
  16.                 content: '自定义弹窗背景',
  17.                 shade: false,
  18.                 style: {backgroundColor: 'rgba(17,17,17,.7)', borderRadius: 6},
  19.                 contentStyle: {color: '#fff', padding: 10},
  20.                 time: 2
  21.         });
  22. }
复制代码
同时还支持对传入content参数进行自定义模板 content: string | object
  1. // 自定义调用
  2. handlePressAA = () => {
  3.         rnPop({
  4.                 content: (
  5.                         <DefineCp />

  7.                         // <View style={{alignItems: 'center', justifyContent: 'center'}}>
  8.                         //     <Image style={{height: 200, width: 200}} source={require('../assets/qrcode.jpg')} />
  9.                         //     <Text style={{color: '#999'}}>长按或扫一扫二维码，加我好友</Text>
  10.                         //     <View><Text onPress={rnPop.close} style={{backgroundColor: '#61dafb', borderRadius: 20, color: '#fff', marginTop: 15, marginBottom: 10, paddingVertical: 5, paddingHorizontal: 50}}>保存二维码</Text></View>
  11.                         // </View>
  12.                 ),
  13.                 anim: 'bottom'
  14.         });
  15. }


  18. // 自定义模板
  19. const DefineCp = () => {
  20.     return (
  21.         <View style={{alignItems: 'center', justifyContent: 'center'}}>
  22.             <Image style={{height: 200, width: 200}} source={require('../assets/qrcode.jpg')} />
  23.             <Text style={{color: '#999'}}>长按或扫一扫二维码，加我好友</Text>
  24.             <View><Text onPress={rnPop.close} style={{backgroundColor: '#61dafb', borderRadius: 20, color: '#fff', marginTop: 15, marginBottom: 10, paddingVertical: 5, paddingHorizontal: 50}}>保存二维码</Text></View>
  25.         </View>
  26.     )
  27. }
复制代码
  1. /**************************
  2. *        弹窗配置参数
  3. *  andy 2019/8/1  Q：282310962
  4. */
  5. static defaultProps = {
  6.         isVisible: false,       //弹窗显示

  8.         title: '',              //标题
  9.         content: '',            //内容
  10.         style: null,            //自定义弹窗样式 {object}
  11.         contentStyle: null,     //内容样式
  12.         skin: '',               //自定义弹窗风格
  13.         icon: '',               //自定义弹窗图标

  15.         shade: true,            //遮罩层
  16.         shadeClose: true,       //点击遮罩层关闭
  17.         opacity: '',            //遮罩层透明度
  18.         time: 0,                //弹窗自动关闭秒数
  19.         xtime: false,           //显示关闭秒数

  21.         anim: 'scaleIn',        //弹窗动画（scaleIn / fadeIn / top / bottom / left / right）
  22.         follow: null,                        //跟随定位（适用于在长按位置定位弹窗）
  23.         position: '',           //弹窗位置

  25.         btns: null,             //弹窗按钮（不设置则不显示按钮）[{...options}, {...options}]
  26. }
复制代码


原文地址：https://www.cnblogs.com/xiaoyan2017/p/11292096.html

作者: 1826496887    时间: 2019-8-10 15:10
谢谢分享
作者: Panacea    时间: 2019-8-15 10:31
感谢分享
作者: 祈祷真情    时间: 2019-12-4 09:37
看起来很强大
作者: 祈祷真情    时间: 2019-12-4 09:38
6666666666666



欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2