React Native弹框封装

在使用RN开发项目时,经常会遇到各种弹框,产品在设计时又是参照iOS来做的,效果如下:
React Native弹框封装_第1张图片
React Native弹框封装_第2张图片

基于此,我们就来封装一个这样的组件,下面是示例代码:

import React, {Component} from 'react';
import PropTypes from 'prop-types';

import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Dimensions,
    ScrollView,
    Modal
} from 'react-native';

let {width, height} = Dimensions.get("window");

export default class AlertView extends Component {

    static propTypes = {
        isShow: PropTypes.bool.isRequired, //控制视图是否显示,必需
        title: PropTypes.string,           //标题,可选
        message: PropTypes.string,         //文本内容,可选
        rightButton: PropTypes.object,     //底部右边按钮
        leftButton: PropTypes.object       //底部右边按钮
    }

    //蒙层背景
    renderMongoliaView() {
        return (
            
        );
    }

你可能感兴趣的:(React,Native)