React Native 之Modal对话框 · 阴影

React Native 的Modal对话框使用很简单，有很多资料可以参考；我在此文中就不多加阐述了；下面我想讲的内容是：Modal对话框的阴影是怎么产生的。

之前使用过Modal对话框，但是每次都在找阴影的产生方法，第一次找到了之后，印象异常深入，但是没有形成记录，所以第二次遇到的时候发现还是不知道怎么用，第二次使用时以为Modal自己就能产生阴影，后来想了半天，找了之前的代码、效果，才发现是在Modal里面是添加了一个遮挡的阴影布局。
代码如下：

{/* 弹出时的全屏阴影部分 */}

<TouchableHighlight
    onPress={this.hide.bind(this)}
    style={[styles.mask]}
    underlayColor="transparent">
    <Text />
</TouchableHighlight>

效果如下：

上个页面引用方法：

<ModalComponent ref="dcustomConfirm" />

上个页面调用方法：

this.refs.dcustomConfirm.show();

以上就是Modal阴影的使用方法；简单的使用。

对话框的所有代码：ModalComponent.js

import React, { Component } from "react";
import { Text, View, StyleSheet, Dimensions, Modal,
 TouchableOpacity, Image, TouchableHighlight } from "react-native";
const { width, height } = Dimensions.get("window");
/**
* 弹框：设置阴影
* 2018年08月25日22:58:26
*/
export default class ModalComponent extends Component {
        constructor(props) {
            super(props);
            this.state = {
                 modalVisible: true
            };
        }

show() {  this.setState({ modalVisible: true }); }

hide() {  this.setState({ modalVisible: false }); }

render() {
    return (
        <Modal
            animationType={"fade"}
            transparent={true}
            visible={this.state.modalVisible}
            onRequestClose={this.hide.bind(this)}>
                    <View style={[styles.container]}>
                            {/* 弹出时的全屏阴影部分 */}
                            <TouchableHighlight
                                onPress={this.hide.bind(this)}
                                style={[styles.mask]}
                                underlayColor="transparent">
                            <Text />
                            </TouchableHighlight>
                            <View style={[styles.echartsContainer]}>
                            <View
                                style={{
                                justifyContent: "cnter",
                                alignItems: "center",
                                height: 340,
                                backgroundColor: "white"
                                }}>
                                <Text style={{ marginTop: 10, fontSize: 14, 
                                    color: "#999", marginBottom: 10 }}>
                                {"Modal弹框来了"}
                                </Text>
                            </View>
                        <TouchableOpacity
                                style={{
                                marginTop: 26,
                                alignItems: "center",
                                justifyContent: "center"
                                }}
                                onPress={this.hide.bind(this)}>
                                <Image style={{ width: 24, height: 24 }}
                                     source={require("../img/pop_up_close.png")} />
                        </TouchableOpacity>
                </View>
            </View>
        </Modal>
    );
    }
}
const styles = StyleSheet.create({
        container: {
            alignItems: "center",
            justifyContent: "center",
            height: height,
            width: width,
            flexDirection: "column",
            backgroundColor: "transparent"
        },
        echartsContainer: {
            height: 450,
            width: width - 48,
            flexDirection: "column"
        },
        mask: {
            justifyContent: "center",
            backgroundColor: "#383838",
            opacity: 0.8,
            position: "absolute",
            width: width,
            height: height,
            left: 0,
            top: 0
        }
});

React Native 之Modal对话框 · 阴影

猜你喜欢