react-native实现popwindow

react实现popwindw，dialog效果都是通过一个modal组件来完成的，之前有写过关于modal的文章react-native modal链接，这篇只是对上一篇的应用.

1：首先封装modal组价

/**
 * Created by xq on 16/12/6.
 */
import React, { Component ,PropTypes} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    StyleSheet,
    Platform,
    Dimensions,
    Image,
    Modal,
    TextInput,
    InteractionManager
} from 'react-native';


export default class AlertModal extends Component{

    constructor(props){
        super(props);
        this.state = { visible: this.props.visible };
    }

    componentWillReceiveProps(props) {
        this.setState({ visible: props.visible });
    }

    close=()=>{
        requestAnimationFrame(()=>{
        if(this.props.close){
            // console.log("close","执行了父组件的close方法")
            this.props.close();
        }else{
            // console.log("close","执行本组件方法")
            this.setState({ visible: false });
        }
        })
    };

    renderContent=()=>{
        return (this.props.contentView);
    };

    render(){
        return(
            <Modal
                animationType={this.props.animation?this.props.animation:'slide'}//进场动画 fade
                onRequestClose={() => this.close()}
                visible={this.state.visible}//是否可见
                transparent={true} //背景透明
                 >
                <TouchableOpacity style={
  {flex:1}} activeOpacity={1} onPress={this.close}//点击灰色区域消失
                >
                <View style={[styles.container,this.props.customerlayout]}>
                    {this.renderContent()}
                </View>
                </TouchableOpacity>
            </Modal>
        )
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor: 'rgba(0, 0, 0, 0.25)',
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        justifyContent:'center',
        alignItems:'center'
    },
    background: {
        backgroundColor: COLOR_BACKGROUND_GRAY,
        justifyContent: 'center',
        alignItems: 'center'
    }

})

2：使用封装好的组件

import React, { Component ,PropTypes} from 'react';
import {
    Alert,
    Text,
    View,
    TouchableOpacity,
    Navigator,
    StyleSheet,
    Platform,
    Dimensions,
    Image,
    ScrollView,
    TextInput,
    StatusBar
} from 'react-native';
import AppImage from "legentzest-appimage";
import HttpRequest from "legentzest-http_request";
import {Actions} from 'legendzest-flux';
import GraySplitLineView from "legentzest-graySplitLineView";
import Spinner from 'react-native-loading-spinner-overlay';
import Toast from 'react-native-root-toast';
import DeviceInfo from 'react-native-device-info';
import AlertModal from '../../common/AlertModal'; //引入modal组件
export default class SystemSetting extends Component{


    constructor(props){
        super(props);
        this.state = {
            visible:false,
            imageSetting:false,
            info:null,
        }
    }


    componentDidMount() {
        READ_CACHE("ispush",(res)=>{


           this.setState({
               is_push:res,
           })
        });


        READ_CACHE(&