react-native自定義Modal、Dialog彈窗|RN原生android/ios彈窗

前段時間就有使用react開發過一些項目，發現react架構有些意思，當初就想着要學習下原生Native技術，最近空閑就一直在研究react-native技術，采坑了不少。一頓學習下來發現沒有想象的難。

react聊天室IM：

https://www.cnblogs.com/xiaoyan2017/p/11062316.html

import RNPop from '../utils/rnPop/rnPop.js'
<View style={styles.container}>
    {/* 引入彈窗模闆 */}
    <RNPop ref="rnPop" />
    ...
</View>
顯示：this.refs.rnPop.show({...options});
隐藏：this.refs.rnPop.hide();           

/**
 * @Title         react-native彈窗插件 rnPop-v1.0 beta (UTF-8)
 * @Author        andy
 * @Create        2019/07/30 10:00:50 GMT+0800 (中國标準時間)
 * @AboutMe　　　 Q：282310962  wx：xy190310
 */

'use strict'

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

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

export default class RNPop extends Component{
    /**************************
     *    彈窗配置參數
     */
    static defaultProps = {
        isVisible: false,       //彈窗顯示

        id: 'rnPop',            //彈窗id辨別
        title: '',              //标題
        content: '',            //内容
        style: null,            //自定義彈窗樣式 {object}
        contentStyle: null,     //内容樣式
        skin: '',               //自定義彈窗風格
        icon: '',               //自定義彈窗圖示

        shade: true,            //遮罩層
        shadeClose: true,       //點選遮罩層關閉
        opacity: '',            //遮罩層透明度
        xclose: false,          //自定義關閉按鈕
        time: 0,                //彈窗自動關閉秒數
        xtime: false,           //顯示關閉秒數

        anim: 'scaleIn',        //彈窗動畫
        follow: null,            //跟随定位（适用于在長按位置定位彈窗）
        position: '',           //彈窗位置
        zIndex: 9999,           //層疊等級

        btns: null,             //彈窗按鈕（不設定則不顯示按鈕）[{...options}, {...options}]
    }
    
    ...
}           

自定義Toast提示，可自定義icon圖示(success | info | error | loading)

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

//msg提示
handlePress01 = ()=> {
    let rnPop = this.refs.rnPop
    rnPop.show({
        anim: 'fadeIn',
        content: 'msg消息提示框（5s後視窗關閉）',
        shade: true,
        shadeClose: false,
        time: 5,
        xtime: true,
    });
}

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

// android 樣式
handlePress20 = ()=>{
    let rnPop = this.refs.rnPop
    rnPop.show({
        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('您點選了更新！');
                }
            }
        ]
    });
}           

//ios對話框
handlePress17 = ()=> {
    let rnPop = this.refs.rnPop
    rnPop.show({
        skin: 'footer',
        position: 'center',
        content: '如果您喜歡探魚，請給我們個好評，也可以直接回報意見給我們！',
        shadeClose: true,
        
        btns: [
            {
                text: '給個好評',
                style: {color: '#30a4fc'},
                onPress() {
                    console.log('您點選了給個好評！');
                    
                    //回調函數
                    rnPop.show({
                        anim: 'fadeIn',
                        content: '感謝您的好評，我們會再接再厲！',
                        shade: true,
                        time: 3
                    });
                }
            },
            {
                text: '不好用，我要提意見',
                style: {color: '#30a4fc'},
                onPress() {
                    // ...
                }
            },
            {
                text: '殘忍的拒絕',
                style: {color: '#30a4fc'},
                onPress() {
                    rnPop.close();
                }
            }
        ]
    });
}