前文
各プロジェクトの品質を見てみると、ネイティブまたはネイティブ側のWebアプリケーション開発か、ポップアップがリングがユーザーエクスペリエンスを決定します大幅に、無視できないです。以下のような:マイクロチャンネル、アリペイ、IOSは、UI表示のポップシーンの非常に洗練されたセットを持っています。
これは、最近反応し、ネイティブの研究開発にふけるされた、研究では、想像することは困難ではないことがわかったが、また、採掘ピットがたくさん。以前と考えるのは、H5およびアプレットの技術に基づいたカスタムポップ経験に取り組ん与えられた模造IOS、アンドロイドポップ|警告メッセージボックス| |確認ボックスを確認|トースト弱いのヒント/ロード実現MSGメッセージボックスに反応ネイティブの技術このrnPopポップ組立RNのバージョンがあります。
レンダリング
シミュレータ上のいくつかの質の時間は、実際のマシンは、それを無視することができ、完全に測定します
地図上に見えた、はい、非常に豊富なアプリケーションのシナリオそのかなりの呼び出し方法ではありません
◆rnPopポップコンポーネントのディレクトリ構造
◆導入方法とコール
「../utils/rnPop/rnPop.js'からインポートRNPop
/ * * * ---------反応し、ネイティブポップデモ(一般的なタイプポップ)--------- * / // MSG先端 handlePress01 =()=> { 聞かせてrnPop = この.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 }); }
toast弱提示可自定义loading | success | info | error四种图标
//Toast演示 handlePress15 = ()=> { let rnPop = this.refs.rnPop rnPop.show({ skin: 'toast', content: '操作成功', icon: 'success', //success | info | error | loading shade: false, time: 3 }); }
//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(); } } ] }); }
/** * @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}] } constructor(props){ super(props) this.state = { ...this.props } 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'), } ... } /************************** * 显示弹窗事件(处理传参) */ show = (args) => { this.setState({ ...this.props, ...args, isVisible: true }) } /************************** * 关闭弹窗事件 */ close = () => { console.log('关闭') this.setState({ ...this.props }) this.timer && clearTimeout(this.timer) delete this.timer } }
◆ react-native自定义弹窗模板
<Modal transparent={true} visible={opt.isVisible} onRequestClose={this.close}> <View style={styles.rnpop__ui_panel}> {/* 遮罩 */} { opt.shade && <View style={styles.rnpop__ui_mask} onTouchEnd={opt.shadeClose ? this.close : null} /> } {/* 窗体 */} <View style={styles.rnpop__ui_main}> <View style={styles.rnpop__ui_child}> {/* 标题 */} { opt.title ? <View style={[styles.rnpop__ui_tit]}><Text style={[styles.rnpop__ui_titxt]}>{opt.title}</Text></View> : null } {/* 内容 */} { opt.content ? <View style={[styles.rnpop__ui_cnt]}> ... <Text style={[styles.rnpop__ui_cntxt, opt.contentStyle]}>{opt.content}</Text> </View> : null } {/* 按钮 */} <View style={[styles.rnpop__ui_btnwrap]}> ... </View> </View> </View> </View> </Modal>
◆ 附上之前的h5和小程序弹窗
h5手机端弹窗:https://www.cnblogs.com/xiaoyan2017/p/8695783.html
h5网页版弹窗:https://www.cnblogs.com/xiaoyan2017/p/10227798.html
小程序弹窗:https://www.cnblogs.com/xiaoyan2017/p/9976897.html