美文网首页RN
ReactNative对话框的实现

ReactNative对话框的实现

作者: gogoingmonkey | 来源:发表于2017-11-22 17:13 被阅读30次

    ReactNative对话框的实现

    ReactNative官方的Modal在使用了预加载JS和RootView优化功能之后,就不能弹Modal窗口,而Modal窗口弹出来的前提是需要当前的Context上下文,而预加载初始化的相关工作传入的context要么是application或其它activity的上下文。

    在这种情况下,我们需要实现弹窗效果就需要其它方案来解决,那么这里就是解决方案;

    一、ReactNaitve JavaScript实现Dialog源码

    'use strict'
    import React, {Component} from 'react';
    import {
        StyleSheet,
        View,
        StatusBar,
        Dimensions, TouchableWithoutFeedback
    } from 'react-native';
    
    const {width, height} = Dimensions.get('window');
    const [left, top] = [0, 0];
    
    export default class Dialog extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                isHidden: this.props.isHidden
            };
            this.position = this.props.position || "center";
            this.outSideDisappear = this.props.outSideDisappear || true;
            this.height = this.props.height || 0;
            this.contentStyle = this.props.contentStyle;
            this.margin = this.props.margin || 0;
        }
    
        /**
         * 隐藏对话框
         */
        dismiss = () => {
            this.setState({
                isHidden: true
            });
        }
    
        /**
         * 显示对话框
         */
        show = () => {
            this.setState({
                isHidden: false
            });
        }
    
        /**
         * 点击透明区域是否消失对话框;
         */
        onDialogOutSideClicked = () => {
            if (this.props.outSideDisappear) {
                this.dismiss();
            }
        }
    
        render() {
            //计算屏的高度
            let screenHeight = height - StatusBar.currentHeight;
            //计算对话框内容区域top的起点位置;
            let top = this.position == "center" ? (screenHeight - this.height) / 2
                    : this.position == "top" ? this.margin
                    :(screenHeight - this.height - this.margin ) ;
    
            return this.state.isHidden ? <View/> : (
                <View style={styles.dialog_container}>
                    {
                      //对话框半透明背景
                    }
                    <TouchableWithoutFeedback style={styles.dialog_mask}
                                              onPress={this.onDialogOutSideClicked}>
                        <View style={styles.dialog_mask}/>
                    </TouchableWithoutFeedback>
            {
                     //对话内容区域视图渲染
                    }
                    <View style={[
                        styles.dialog_center,
                        this.props.contentStyle,
                        {
                            height: this.height,
                            left:this.margin,
                            width:width - 2 * this.margin,
                            top: top }] }>
                        {this.props.children}
                    </View>
    
                </View>);
        }
    }
    
    const styles = StyleSheet.create({
        dialog_container: {
            position: "absolute",
            width: width,
            height: height,
            left: left,
            top: top,
        },
        dialog_mask: {
            justifyContent: "center",
            backgroundColor: "#383838",
            opacity: 0.8,
            position: "absolute",
            width: width,
            height: height,
            left: left,
            top: top,
        },
        dialog_center: {
            position: "absolute",
            width: width,
            backgroundColor: "#FFFFFF",
            justifyContent: "center",
            alignSelf: "center",
            left: left,
        }
    });
    
    

    二、Dialog的使用说明

    导入Dialog.js文件后,在你的界面render方法中加入如下代码.

    Dialog定义了如下基本属性

    <Dialog
        ref = { component=>{ this.dialog = component; } }
        outSideDisappear = { true } //是否点击半透明区域让对话框消失;
        contentStyle = { styles.dialog }
        position = "center" // 对话框内容区域布局对齐方式:"center","top","bottom", 默认值是:"center"
        height = { PixelRatio.getPixelSizeForLayoutSize(50) }
        isHidden = { this.state.isDialogShow } // 对话框默认是否隐藏,默认为false
        isStatusBarHidden = { true } //状态栏是否处于显示状态,默认为false;
        margin = { PixelRatio.getPixelSizeForLayoutSize(5) }>
            <Text style={ styles.title }>温馨提示</Text>
            <Text style={ styles.content }>确定要购买?</Text>
            <View style = { styles.dialogContent }>
                <Text style={ styles.cancel }>取消</Text>
                <Text style={ styles.ok }>确定</Text>
            </View>
    </Dialog>
    
    ...
    
    const styles = StyleSheet.create({
    
        dialog : {
            justifyContent:"flex-start",
            backgroundColor: "#ffffff",
            borderRadius:5,
        },
    
        title:{
            color:"#000000",
            alignSelf:"center",
            fontSize:18,
            height:25,
            marginTop:10,},
    
        content:{
            color:"#000000",
            alignSelf:"flex-start",
            height:70,
            fontSize:17,
            marginLeft:50,
            textAlignVertical:"center"},
    
        cancel:{
            color:"#000000",
            alignSelf:"center",
            fontSize:18,
            height:25,
            marginTop:10,
            marginRight:50},
    
        ok:{
            color:"#000000",
            alignSelf:"center",
            fontSize:18,
            height:25,
            marginTop:10,
            marginLeft:50},
    
        dialogContent:{
            flexDirection:"row",
            justifyContent:"center",
            alignItems:"center"}
        });
    
    

    效果图如下

    image.png

    相关文章

      网友评论

        本文标题:ReactNative对话框的实现

        本文链接:https://www.haomeiwen.com/subject/oprovxtx.html