Taro自定義Modal對話框組件|taro仿微信、android彈窗

来源:https://www.cnblogs.com/xiaoyan2017/archive/2019/12/02/11969729.html

基於Taro多端實踐TaroPop:自定義模態框|dialog對話框|msg消息框|Toast提示 taro自定義彈出框支持編譯到多端H5/小程式/ReactNative,還可以自定義彈窗類型/彈窗樣式、多按鈕事件/樣式、自動關閉、遮罩層、彈窗顯示位置及自定義內容模板 用法 ▍在相應頁面引入組件 i ...


基於Taro多端實踐TaroPop:自定義模態框|dialog對話框|msg消息框|Toast提示

taro自定義彈出框支持編譯到多端H5/小程式/ReactNative,還可以自定義彈窗類型/彈窗樣式、多按鈕事件/樣式、自動關閉、遮罩層、彈窗顯示位置及自定義內容模板

用法

 ▍在相應頁面引入組件

 import TaroPop from '@components/taroPop' 

import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'

// 引入自定義彈窗組件
import TaroPop from '@components/taroPop'

export default class TaroPopDemo extends Taro.Component {
    ...

    render() {
        return (
            <View className="taro-container">
                ...
                
                {/* 引入彈窗模板 */}
                <TaroPop ref="taroPop" />
            </View>
        );
    }
}

通過ref方式調用組件內show、close方法

 this.refs.taroPop.show({...options}) 

 this.refs.taroPop.close() 

 ▍自定義彈窗模板內容(如下圖)

只需把頁面上的模板寫成如下即可,調用方式還和上面一樣

<TaroPop ref="taroPopTpl">
    ...
</TaroPop>

支持多種參數配置:

/** 
 * @ 彈窗預設配置 
 */
static defaultProps = {
    isVisible: false,       //彈窗顯示
    
    title: '',              //標題
    content: '',            //內容
    contentStyle: null,     //內容樣式
    style: null,            //自定義彈窗樣式
    skin: '',               //彈窗風格
    icon: '',               //彈窗圖標
    xclose: false,          //自定義關閉按鈕
    
    shade: true,            //遮罩層
    shadeClose: true,       //點擊遮罩關閉
    opacity: '',            //遮罩透明度
    time: 0,                //自動關閉時間
    end: null,              //銷毀彈窗回調函數
    
    position: '',           //彈窗位置顯示

    btns: null,             //彈窗按鈕 [{...args}, {...args}]
}
/** 
 * 顯示彈窗事件 
 */
show = (options) => {
    this.setState({
        ...this.props, ...options, isVisible: true
    })
}

/** 
 * 關閉彈窗事件 
 */
close = () => {
    this.setState({...this.props})

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

    typeof this.state.end === 'function' && this.state.end.call(this)
}

/** 
 * 點擊遮罩關閉 
 */
shadeClick = () => {
    if(!this.state.shadeClose) return
    this.close()
}

◆ msg消息框提示

this.refs.taroPop.show({
    content: 'Taro自定義模態Modal彈窗',
    shadeClose: false,
    style: {backgroundColor: 'rgba(0,0,0,.7)', borderRadius: 6},
    contentStyle: {color: '#fff', fontSize: 12, padding: 12},
    time: 3,
    opacity: .2,
})

◆ Toast輕提示效果(success | error | info | loading四種圖標

let taroPop = this.refs.taroPop
taroPop.show({
    skin: 'toast',
    content: 'loading',
    icon: 'loading', //success | info | error | loading
    shade: false,
    time: 3
})

◆ android彈窗效果

let taroPop = this.refs.taroPop
taroPop.show({
    skin: 'android',
    title: '郵件提醒',
    content: '系統檢測到你未開啟新郵件提醒功能,為了保證新郵件能及時收到提醒,請前往系統 [設置] - [應用] 中開啟',
    shadeClose: false,
    
    btns: [
        {
            text: '取消',
            onClick() {
                taroPop.close()
            }
        },
        {
            text: '前往設置',
            style: {color: '#4eca33'},
            onClick() {
                console.log('您點擊了前往設置!')
            }
        }
    ]
})

emmmm,看瞭如上展示及調用方式,是否覺得還不錯喲!哈哈哈,這可是花了無數個日夜採坑的結果。

尤其是編譯到reactNative端,各種千奇百怪的問題,有些抓狂~~

另外對於不同端的一些相容性處理,需要判斷各端環境並渲染相應模板,對於RN,則使用Modal

let taroEnv = process.env.TARO_ENV

// 渲染窗體
if (taroEnv === 'rn') {
    return (
        <Modal transparent={true} visible={isVisible} onRequestClose={this.close}>
            {renderTpl}
        </Modal>
    )
}else if (taroEnv === 'h5' || taroEnv === 'weapp'){
    return isVisible && renderTpl
}

另外在樣式處理上也需註意RN端相容性。

/**
 * @Title     Taro自定義彈窗組件 - taroPop.js
 * @Time     andy by 2019-11-28
 * @About     Q:282310962  wx:xy190310
 */

import Taro from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { Modal, ActivityIndicator, TouchableHighlight } from 'react-native'
import classNames from 'classnames'
import './index.scss'

export default class TaroPop extends Taro.Component {
    /** 
     * @ 彈窗預設配置 
     */
    static defaultProps = {
        isVisible: false,       //彈窗顯示

        title: '',              //標題
        content: '',            //內容
        contentStyle: null,     //內容樣式
        style: null,            //自定義彈窗樣式
        skin: '',               //彈窗風格
        icon: '',               //彈窗圖標
        xclose: false,          //自定義關閉按鈕

        shade: true,            //遮罩層
        shadeClose: true,       //點擊遮罩關閉
        opacity: '',            //遮罩透明度
        time: 0,                //自動關閉時間
        end: null,              //銷毀彈窗回調函數

        anim: 'scaleIn',        //彈窗動畫
        position: '',           //彈窗位置顯示

        btns: null,             //彈窗按鈕 [{...args}, {...args}]
    }

    constructor(props) {
        super(props)
        this.state = {
            ...this.props,
        }
        this.timer = null
    }


    /** 
     * @ 顯示彈窗事件 
     */
    show = (options) => {
        this.setState({
            ...this.props, ...options, isVisible: true
        })
    }

    /** 
     * @ 關閉彈窗事件 
     */
    close = () => {
        this.setState({...this.props})

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

        typeof this.state.end === 'function' && this.state.end.call(this)
    }

    /** 
     * @ 點擊遮罩關閉 
     */
    shadeClick = () => {
        if(!this.state.shadeClose) return
        this.close()
    }

    render() {
        let { isVisible, title, content, contentStyle, style, skin, icon, xclose, shade, shadeClose, opacity, time, end, anim, position, btns } = this.state
        
        let toastIcon = {
            loading: require('./skin/loading.png'),
            success: require('./skin/success.png'),
            error: require('./skin/error.png'),
            info: require('./skin/info.png'),
        }

        let taroEnv = process.env.TARO_ENV
        
        ...

        // 渲染H5、RN模板
        const renderTpl = (
            <View className="taroPop">
                {/* 遮罩 */}
                {shade ? <View className="atpop__ui_mask" style={{opacity: opacity == '' ? .6 : opacity}} onClick={this.shadeClick} /> : null}
                {/* 窗體 */}
                <View className="atpop__ui_main">
                    <View className={classNames('atpop__ui_child', skin && 'atpop__' + skin, position && 'atpop__ui_child-' + position)} style={style}>
                        {/* 標題 */}
                        {title ? <Text className={classNames('atpop__ui_tit', skin && 'atpop__ui_tit-' + skin)}>{title}</Text> : null}
                        {/* 內容 */}
                        {content ? <View className="atpop__ui_cnt">
                            {/* toast內容 */}
                            {icon && skin === 'toast' ?
                                <View className="atpop__ui_toast">
                                    {icon === 'loading' && taroEnv === 'rn' ?
                                    <ActivityIndicator color="rgba(255,255,255,.5)" size={24} /> : <Image className={classNames('atpop__ui_toast-img', icon=='loading' && 'atpop__ui_toast-img-loading')} src={toastIcon[icon]} mode="aspectFit" />
                                    }
                                </View>
                                :
                                null
                            }
                            {/* 文本內容 */}
                            <Text className={classNames('atpop__ui_cntxt', skin && 'atpop__ui_cntxt-' + skin)} style={contentStyle}>{content}</Text>
                        </View>
                        :
                        this.props.children
                        }
                        {/* 按鈕 */}
                        {btns ? <View className={classNames('atpop__ui_btns', skin && 'atpop__ui_btns-' + skin)}>
                            {btns.map((item, i) => {
                                return taroEnv === 'rn' ? 
                                <TouchableHighlight className={classNames('atpop__ui_btn', skin && 'atpop__ui_btn-' + skin)} activeOpacity={1} underlayColor='rgba(200,200,200,.3)' key={i} onPress={item.onClick}>
                                    <Text className={classNames('atpop__ui_btntxt', skin && 'atpop__ui_btntxt-' + skin)} style={item.style}>{item.text}</Text>
                                </TouchableHighlight>
                                :
                                <View className={classNames('atpop__ui_btn', skin && 'atpop__ui_btn-' + skin)} key={i} onClick={item.onClick}>
                                    <Text className={classNames('atpop__ui_btntxt', skin && 'atpop__ui_btntxt-' + skin)} style={item.style}>{item.text}</Text>
                                </View>
                            })}
                        </View>
                        :
                        null
                        }
                    </View>
                    {/* xclose */}
                    {xclose ? <View className="atpop__ui_xclose" onClick={this.close}><Image className="atpop__ui_xclose-img" src={require('./skin/error.png')} mode="aspectFit" /></View> : null}
                </View>
            </View>
        )

        // 渲染窗體
        if (taroEnv === 'rn') {
            return (
                <Modal transparent={true} visible={isVisible} onRequestClose={this.close}>
                    {renderTpl}
                </Modal>
            )
        }else if (taroEnv === 'h5' || taroEnv === 'weapp'){
            return isVisible && renderTpl
        }
    }
}

好了,以上就是taro自定義彈窗組件實現方式,希望能有幫助✊✊~~

 


您的分享是我們最大的動力!

更多相關文章
  • 原始數據類型: number, string, boolean, undefined, null, object 基本類型(簡單類型), 即值類型: number, string, boolean 複雜類型(引用類型): object 空類型:undefined, null 存儲空間 值類型的值在哪 ...
  • 1. 對象: 有屬性和方法,特指的某個事物 對象: 一組無序屬性的集合的鍵值對,屬性的值可以是任意的類型 2.JSON格式的數據:一般都是成對的,是鍵值對, json也是一個對象, 數據都是成對的, 一般json格式的數據無論是鍵還是值都是用雙引號括起來的 var json = { "name": ...
  • 在使用jquery-validate.js插件時可以做一些初始化配置在初始化jquery-validate.js對象的時候,將外部的一些配置和該插件內部的一些預設配置合併在一起,如果有相同的配置,前者覆蓋後者(預設)的配置 // Constructor for validator $.validat ...
  • JS是一門什麼樣的語言? 是一門解釋性的語言 是一門腳本語言 是一門弱類型語言,聲明變數都用var 是一門基於對象的語言 是一門動態類型的語言: 1. 代碼(變數)只有執行到這個位置的時候,才知道這個變數中到底存儲的是什麼,如果是對象,就有對象的屬性和方法,如果是變數就是變數的作用 2. 對象沒有什 ...
  • 1. 簡書類 實現效果 html代碼 <div class="container"> <form action="" class="parent"> <input type="text" class="search" placeholder="搜索"> <input type="button" na ...
  • javascript 報錯 string.split is not a function ...
  • 自定義html元素滑鼠右鍵菜單 實現思路 在觸發contextmenu事件時,取消預設行為(也就是阻止瀏覽器顯示自帶的菜單),獲取右鍵事件對象,來確定滑鼠的點擊位置,作為顯示菜單的left和top值 編碼實現 <!DOCTYPE html> <html> <head> <meta charset=" ...
  • 功能:在文本框中輸入待辦事項按下回車後,事項會出現在未完成列表中;點擊未完成事項前邊的覆選框後,該事項會出現在已完成列表中,反之亦然;點擊刪除按鈕會刪除該事項。待辦事項的數據是保存到本地存儲的(localStorage),就算關閉頁面再打開,數據還是存在的(前提是要用相同瀏覽器)。 ToDoList ...
一周排行
  • FastDBF源代碼地址:https://github.com/SocialExplorer/FastDBF 第一步在解決方案中新建一個類庫的項目:取名為SocialExplorer.FastDBF 第二步:引入FASTDBF的源文件 源代碼可以通過github地址下載引入 源文件:DbfColum ...
  • 目 錄 1. 概述... 2 2. 演示信息... 2 3. 安裝Docker容器... 2 4. 安裝dotnet鏡像... 3 5. 複製iNeuKernel到容器中... 4 6. 進入指定容器... 4 7. 安裝dotnet框架... 4 8. 在Docker容器中運行iNeuKernel ...
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/7699301.html,記錄一下學習過程以備後續查用。 一、引言 今天我們要講結構型設計模式的第二個模式--橋接模式,也有叫橋模式的。橋在我們現實生活中經常是連接著A地和B地,再往後來發展,橋引申為一種紐 帶, ...
  • static void AggregateExceptionsDemo() { var task1 = Task.Factory.StartNew(() => { var child1 = Task.Factory.StartNew(() => { throw new CustomException ...
  • http請求在我們實際工作中天天見,為了不重覆造輪子,現在分享一下最近的一次封裝整理,供大家參考,交流,學習! ...
  • 隨著你的 Python 項目越來越多,你會發現不同的項目會需要 不同的版本的 Python 庫。同一個 Python 庫的不同版本可能不相容。虛擬環境可以為每一個項目安裝獨立的 Python 庫,這樣就可以隔離不同項目之間的 Python 庫,也可以隔離項目與操作系統之間的 Python 庫。 1. ...
  • TypeScript 介紹 TypeScript 是什麼 TypeScript 是 JavaScript 的強類型版本。然後在編譯期去掉類型和特有語法,生成純粹的 JavaScript 代碼。由於最終在瀏覽器中運行的仍然是 JavaScript,所以 TypeScript 並不依賴於瀏覽器的支持,也 ...
  • Hello World 新建 並寫入以下內容: 安裝編譯器: 編譯: 修改 文件中的代碼,為 greeter 函數的參數 person 加上類型聲明 : 重新編譯執行。 讓我們繼續修改: 重新編譯,你將看到如下錯誤: 介面(Interface) 類(Class) 變數聲明 作用域 重覆聲明 塊級作用 ...
  • 解構賦值 數組解構 上面的寫法等價於: 利用解構賦值交換變數: 函數參數解構: 解構剩餘參數: 也可以忽略其它參數: 或者跳過解構: 對象解構 示例一: 就像數組解構,你可以用沒有聲明的賦值: 你可以在對象里使用 語法創建剩餘變數: 屬性解構重命名 你也可以給屬性以不同的名字: 註意,這裡的冒號 不 ...
  • 函數 函數參數 參數及返回值類型 可選參數 預設參數 剩餘參數 箭頭函數 基本示例 for of 迴圈 for 迴圈 forEach 不支持 break for in 會把數組當作對象來遍歷 for of 支持 break 類型推斷(Type Inference) 類型相容性 模塊 概念 模塊通信: ...
x