2019-04-09 react-native-modalbox

import React, { PureComponent } from 'react'
import { View, Text, Image, StyleSheet, Dimensions, StatusBar, Platform, ImageBackground,TouchableOpacity } from 'react-native'
import PropTypes from 'prop-types'
import Modal from 'react-native-modalbox'
import updateBackground from '../images/updateBackground.png'
import updateAppLogo from '../images/updateAppLogo.png'
export const { width, height } = Dimensions.get('window')
class AppUpdateModelBox extends PureComponent {


    static propTypes = {
        onSelect: PropTypes.func.isRequired,
        onPress: PropTypes.func.isRequired,
        onCancle: PropTypes.func,
        onData: PropTypes.string,
    }


    static defaultProps = {
        onCancle: () => { },
    }
    //传数据打开
    open() {
        this.refs.SelectPicModal.open()
    }

    render() {
        return (
                <Modal
                    style={[styles.background]}
                    ref="SelectPicModal"
                    backdropPressToClose={true}
                    backButtonClose
                    position="center"
                    entry="top"
                    swipeToClose={false}
                    backdropContent={()=>{
                        return (<View style={{backgroundColor:'red'}}>
                                   ///关键点写这个属性可以在背景层显示自己要显示的内容
                            </View>)
                    }}
                >
                    <View style={styles.container}>
                        <ImageBackground style={styles.backgroundIcon} source={updateBackground}>
                            <Text style={styles.titleText}>发现新版本</Text>
                            <Text>1.页面全量更新</Text>
                            <Text>2.bug修复,赶快去体验吧</Text>
                        </ImageBackground>
                        <TouchableOpacity
                            onPress={() => {
                                this.props.onPress()
                            }}
                        >
                            <View style={styles.confirmView}>
                                <Text style={styles.confirmTextColor}>立即更新</Text>
                            </View>

                        </TouchableOpacity>
                    </View>
                     <View style={styles.topView}>
                         <Image style={{ width: 60, height: 60}} source={updateAppLogo} />
                    </View>
                    
                </Modal>
               
            

        )
    }
}

const styles = StyleSheet.create({
    modalView:{
        height:280,
        width: width * 0.6,
    },  
    background: {
        width: width * 0.6,
        height: 250,
        backgroundColor: '#fff',
        borderRadius: 8,
    },
    container: {
        height: 250,
        alignItems: 'center',
    },
    backgroundIcon: {
        height: 250,
        width: width * 0.6,
        justifyContent: 'center',
        alignItems: 'center'
    },
    titleText: {
        fontSize: 25,
        fontWeight: 'bold',
    },
    confirmTouch: {
        width: width * 0.5,
        position: 'absolute',
        bottom: 10,
        left: 10,
        right: 10,
        backgroundColor: '#e96e64'
    },
    confirmView: {
        width: width * 0.5,
        backgroundColor: '#e96e64',
        paddingVertical: 10,
        marginBottom: 10,
        marginHorizontal: 10,
        borderRadius: 3,
    },
    confirmTextColor: {
        fontWeight: 'bold',
        textAlign: 'center',
        color: '#fff',
    },
    topView:{
        width:width*0.6,
        position: 'absolute',
        top:-30,
        zIndex: 999 ,
        alignItems:'center',
    }

})
export default AppUpdateModelBox 

ui界面处调用代码如下：

import AppUpdateModelBox from '../components/AppUpdateModelBox'  

 <AppUpdateModelBox
                    ref={(ref) => {
                        this.AppUpdateModelBox = ref;
                    }}
                    onPress={() => {
                        this.openWebUrl()
                    }}
                    onSelect={
                        ()=>{

                        }
                    }
                >
                </AppUpdateModelBox>
 //打开弹窗代码
  this.AppUpdateModelBox.open()