react-native 仿原生自定义弹窗|iOS/Android 弹窗效果

react-native仿原生自定义弹窗|ios/android弹窗效果
react-native仿原生自定义弹窗|ios/android弹窗效果

基于react-native技术开发的自定义模态框rnPop,结合原生Modal功能,实现类似android、ios、微信弹窗效果。

目录结构
react-native仿原生自定义弹窗|ios/android弹窗效果

调用方法一:

// 引入rnPop.js组件
import RNPop from '../utils/rnPop/rnPop.js'

render() {
    return (
        <View style={styles.container}>
            ...

            {/* 引入弹窗模板 */}
            <RNPop ref="rnPop" />
        </View>
    )
}

显示:this.refs.rnPop.show({...options});
隐藏:this.refs.rnPop.hide();

调用方法二:
利用react-native全局变量global,对外暴露接口

/**************************
 *    实例化弹窗接口
 */
const Popup = (args) => {
    RNPop.show(args)
}
Popup.close = () => {
    RNPop.close()
}
global.rnPop = Popup

可以非常优雅的使用rnPop({…options}) 、 rnPop.close()方式进行弹窗调用

//msg提示
handlePress01 = ()=> {
    rnPop({
        content: 'msg消息提示框(5s后窗口关闭)',
        shade: true,
        shadeClose: false,
        time: 5,
        xtime: true,
        anim: 'fadeIn',
    });
}

//msg提示(黑色背景)
handlePress02 = ()=> {
    rnPop({
        content: '自定义弹窗背景',
        shade: false,
        style: {backgroundColor: 'rgba(17,17,17,.7)', borderRadius: 6},
        contentStyle: {color: '#fff', padding: 10},
        time: 2
    });
}

react-native仿原生自定义弹窗|ios/android弹窗效果

react-native仿原生自定义弹窗|ios/android弹窗效果

react-native仿原生自定义弹窗|ios/android弹窗效果

react-native仿原生自定义弹窗|ios/android弹窗效果

react-native仿原生自定义弹窗|ios/android弹窗效果

另外,react-native自定义toast支持四种图标 success/info/error/loading

//Toast演示
handlePress15 = ()=> {
    rnPop({
        skin: 'toast',
        content: '操作成功',
        icon: 'success', //success | info | error | loading
        shade: false,
        time: 3
    });
}

react-native仿原生自定义弹窗|ios/android弹窗效果

react-native仿原生自定义弹窗|ios/android弹窗效果

ios弹窗效果及android效果

//ios对话框
handlePress16 = ()=> {
    rnPop({
        skin: 'footer',
        content: 'Apple ID \n 282310962@qq.com',
        shadeClose: false,
        anim: 'bottom',

        btns: [
            {
                text: '注销账号',
                style: {color: '#30a4fc'},
                onPress() {
                    console.log('您点击了恢复!');
                }
            },
            {
                text: '删除',
                style: {color: '#e63d23'},
                onPress() {
                    console.log('您点击了删除!');

                    //删除回调提示
                    rnPop({
                        anim: 'fadeIn',
                        content: '您点击了删除功能',
                        shade: true,
                        time: 3
                    });
                }
            },
            {
                text: '取消',
                style: {color: '#999'},
                onPress() {
                    console.log('您点击了取消!');
                    rnPop.close();
                }
            }
        ]
    });
}
// android 样式
handlePress20 = ()=>{
    rnPop({
        skin: 'android',
        title: '发现新版本',
        content: '程序员GG紧急修复了一个闪退bug,给您带来的不便敬请谅解。\n\n[近期更新]\n 1、新增资讯&话题入口 \n 2、新增详情页面长按分享功能',

        shadeClose: false,

        btns: [
            {
                text: '知道了',
                onPress() {
                    rnPop.close();
                    console.log("知道了");
                }
            },
            {
                text: '更新',
                style: {color: '#4eca33'},
                onPress() {
                    console.log('您点击了更新!');
                }
            }
        ]
    });
}

react-native仿原生自定义弹窗|ios/android弹窗效果

react-native仿原生自定义弹窗|ios/android弹窗效果

react-native仿原生自定义弹窗|ios/android弹窗效果

react-native仿原生自定义弹窗|ios/android弹窗效果

react-native仿原生自定义弹窗|ios/android弹窗效果

react-native仿原生自定义弹窗|ios/android弹窗效果

emmm,看到这里是不是感觉还不错,不过总感觉少了点啥。
没错,上面弹窗都是传入的string字符串, 能不能传入Text、View自定义模板呢,答案是可以的。
还支持对传入content参数进行自定义模板 content: string | object

// 自定义调用
handlePressAA = () => {
    rnPop({
        content: (
            <DefineCp />

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

// 自定义模板
const DefineCp = () => {
    return (
        <View style={{alignItems: 'center', justifyContent: 'center'}}>
            <Image style={{height: 200, width: 200}} source={require('../assets/qrcode.jpg')} />
            <Text style={{color: '#999'}}>长按或扫一扫二维码,加我好友</Text>
            <View><Text onPress={rnPop.close} style={{backgroundColor: '#61dafb', borderRadius: 20, color: '#fff', marginTop: 15, marginBottom: 10, paddingVertical: 5, paddingHorizontal: 50}}>保存二维码</Text></View>
        </View>
    )
}

react-native仿原生自定义弹窗|ios/android弹窗效果

/**
 * @Title         react-native弹窗插件 rnPop-v1.0 beta (UTF-8)
 * @Create        2019/08/01 10:00:50 GMT+0800 (中国标准时间)
 * @Author        andy  Q:282310962  wx:xy190310
 */

'use strict'

import React, {Component} from 'react'
import {
    Animated, Easing, StyleSheet, Dimensions, PixelRatio, TouchableHighlight, Modal, View, Text, Image, ActivityIndicator
} from 'react-native'

const pixel = PixelRatio.get()
const {width, height} = Dimensions.get('window')

export default class RNPop extends Component{
    /**************************
     *    弹窗配置参数
     */
    static defaultProps = {
        isVisible: false,       //弹窗显示

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

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

        anim: 'scaleIn',        //弹窗动画(scaleIn / fadeIn / top / bottom / left / right)
        follow: null,            //跟随定位(适用于在长按位置定位弹窗)
        position: '',           //弹窗位置

        btns: null,             //弹窗按钮(不设置则不显示按钮)[{...options}, {...options}]
    }

    constructor(props){
        super(props)

        this.state = {
            ...this.props,
            animatedValue: new Animated.Value(0),
        }
        this.timer = null
    }

    render(){
        let opt = this.state

        // __自定义toast图标
        let slotImg = {
            success: require('./skin/success.png'),
            error: require('./skin/error.png'),
            info: require('./skin/info.png'),
        }

        return (
            ...
        )

    }

    // 执行动画
    in = () => {
        Animated.timing(
            this.state.animatedValue, {easing: Easing.linear, duration: 300, toValue: 1}
        ).start()
    }
    out = () => {
        Animated.timing(
            this.state.animatedValue, {easing: Easing.linear, duration: 100, toValue: 0}
        ).start(()=>{
            this.setState({
                ...this.props
            })
        })

        this.timer && clearTimeout(this.timer)
        delete this.timer
    }

    /**************************
     *    显示弹窗事件(处理传参)
     */
    static show = (args) => {
        _this.setState({
            ..._this.props, ...args, isVisible: true
        }, _this.in)
    }

    /**************************
     *    关闭弹窗事件
     */
    static close = () => {
        _this.out()
    }
}

react-native仿原生自定义弹窗|ios/android弹窗效果

本作品采用《CC 协议》,转载必须注明作者和本文链接
本文为原创文章,未经作者允许不得转载,欢迎大家一起交流 QQ(282310962) wx(xy190310)
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
文章
46
粉丝
44
喜欢
99
收藏
54
排名:372
访问:2.6 万
私信
所有博文
博客标签
react
1
angular
1
react仿微信
2
react实战开发
2
react+redux
1
react网页聊天
2
angular仿微信
1
angular聊天室
1
angular+node聊天
1
h5仿微信
1
仿微信语音
1
仿微信界面
1
RN弹窗
1
react-native自定义弹窗
1
react-native弹窗
1
React Native
1
reactNative仿微信
1
RN仿微信聊天
1
ReactNative朋友圈
1
uniapp仿微信
1
uniapp聊天室
2
uniapp聊天App
1
uni-app+vue实例
1
uni-app即时通讯
1
uniapp直播
1
uni-app仿抖音
1
uniapp仿陌陌
1
uni-app小视频
1
taro仿微信
1
taro聊天室
1
taro仿微信界面
1
taro+react聊天APP
1
taro即时通讯
1
electron+vue
1
electron-vue仿微信
1
electron聊天
1
electron实例
1
flutter实例
1
flutter仿微信
1
flutter+dart聊天
1
flutter聊天室
1
flutter聊天界面
1
vue自定义弹窗
1
vue全局对话框
1
vue长按弹出框
1
vue右键弹层
1
nuxt对话框
1
vue仿微信弹窗
1
vue仿探探
1
vue仿Tinder
1
vue卡片堆叠
1
vue翻牌滑动
1
nuxt仿探探
1
nuxt聊天室
1
nuxt仿微信
1
nuxt即时聊天
1
vue+nuxt聊天实例
1
nuxt.js朋友圈
1
vue.js自定义对话框
1
vue pc端弹窗
1
vue.js桌面端模态框
1
vue弹窗组件
1
vue仿layer
1
vue.js自定义滚动条
1
vue虚拟滚动条
1
vue美化滚动条
1
vue仿饿了么滚动条
1
Vue-Scrollbar
1
react.js弹窗示例
1
react桌面端弹框
1
react.js自定义对话框
1
react pc自定义弹窗
1
react全局弹框
1
vue3.0自定义组件
1
vue3弹框
1
vue3.x对话框
1
vue3.0弹窗
1
vue3.0实例
1
vue3.0聊天室
1
vue3.0仿微信
2
vue3聊天模板
1
vue3+vant3实战开发
1
vue3.x案例
1
vue3聊天实例
1
vue3.0仿QQ
1
vue3.x实战聊天
1
vue3网页聊天
1
vue3.0仿抖音app
1
vue3短视频
1
vue3.x小视频
1
vue3.0直播实例
1
vue3+vite2+vant3实战
1
vue3跨端开发
1
electron仿QQ
1
electron打包
1
electron聊天室
1
electron仿微信
1
electron仿抖音
1
electron短视频
1
electron直播
1
vite2+electron12
1
vite2+vue3.x+swiper
1
vue3+vite.js+vant3
1
vue3后台系统
1
Electron管理系统
1
vite2+electron后台
1
electron12权限管理
1
electron桌面端后台
1
vue3桌面管理
1
vite2+electron13
1
electron仿mac桌面
1
electron桌面管理
1
vite2桌面应用
1
uniapp短视频
1
uniapp仿抖音
1
uni-app直播
1
uniapp后台
1
uni-app+uview后台系统
1
svelte.js实战开发
1
svelte3仿微信
1
svelte+svelteKit聊天室
1
svelte聊天实例
2
svelte朋友圈
1
svelte.js仿微信
1
svelte.js网页聊天
1
svelte-ui-admin
1
svelte-admin后台管理
1
svelte管理系统
1
tauri桌面应用
1
tauri+vue3
1
vite3+tauri
1
tauri聊天程序
1
tauri仿微信
1
vue3后台管理
1
vite.js管理系统
1
vue3+vite4
1
vite4+pinia
1
vue3+pinia2
1
vue3-chatgpt
2
vite-chatgpt
1
chatgpt-mobile
1
electron-chatgpt
1
electron+vite4+vue3
1
electron25-vue3
1
chatgpt-vite
1
uni-chatgpt
1
uniapp+vue3+pinia
2
vite+uniapp
1
chatgpt-uniapp
1
tauri-admin
1
tauri+rust+vue3
1
tauri后台管理
1
tauri-vite
1
tauri+vue3桌面端后台
1
react18 hooks
2
react18+arco
2
react18+zustand
1
react18-webchat
1
react18-admin
1
react-arco-admin
1
react-vite-admin
1
react18后台管理
1
electron-mateos
1
electron27+react18
1
electron-react-macos
1
electron桌面os
1
react-macos
1
uniapp+vue3直播
1
flutter3-chat
2
flutter3仿微信
2
flutter3聊天
2
flutter3+dart3
1
flutter3桌面端开发
1
flutter3-douyin
1
flutter3仿抖音
1
flutter3短视频
1
flutter3直播
1
社区赞助商