mobx与自定义弹框组件(Dialog)的结合

在开始写弹框之前，需要确定实现以下效果：

效果图

效果需求：
1.点击请点击弹出弹框。
2.弹框的头部、中间内容、选项块的内容均为可变的。
3.弹框的大小随着框内内容的多少成比例扩大。
4.选项块的数量也可变，暂定最少1个，最多2个。
5.点击选项块后实现回调方法，也可不回调，也可能传的回调方法为空。
6.不能用modal,因为当两个modal同时出现时项目会崩，可用position实现。
技术点：
1.可利用mobox的观察者、也可用setState
2.弹框为封装好的组件，父组件中不可再使用state控制弹框的出现与否，而需要在弹框组件内部暴露出一个修改弹框内容state的函数，父组件用ref调用。
3.当子组件中使用了inject()方法调取数据时，注意this.refs.子组件ref值.子组件函数是会报错的，需要使用this.refs.子组件ref值.wrappedInstance.子组件方法
4.也可以为observable的数据与action封装一个store，只有调用它的store后才会刷新父组件。
实现过程：
1.封装Dialog组件

//Dialog.js
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    Dimensions,
    TouchableOpacity,
} from 'react-native';
const { width, height } = Dimensions.get('window');
import { remove, getPixel } from '..';
import{observer,inject} from 'mobx-react';
import { observable } from 'mobx';
/*eslint-disable*/
//  @inject('rootStore')
@observer
export class Dialog extends Component{

    /**
     * from @marongting Tel 13269798391
     * content 弹窗是否出现控制器
     */
    @observable isFrameShow = false;

    constructor(props){
        super(props);
       
    }
    
    frameShow =() =>{
        this.isFrameShow = !this.isFrameShow;
    }
    render(){
        const {title,content,isCancel,isSubmit,cancel,submit} = this.props;
        return(
            
                {
                    this.isFrameShow && 
                    
                        
                            
                                
                            {
                             title ? title : '提示' 
                            }
                            
                            
                            
                            {
                                content ? content :'确定要退出登录？'
                            }
                            
                            
                            
                            
                            {
                                isCancel &&
                                {
                                        this.isFrameShow = false;
                                        this.props.cancelFunc && this.props.cancelFunc()
                                    }
                                }>
                                
                                {
                                    cancel ? cancel :'取消'
                                }
                                    
                                
                                
                            }
                            {
                                isCancel && isSubmit &&
                                
                            }
                           {
                               isSubmit &&
                               {
                                    this.isFrameShow = false;
                                    this.props.submitFunc && this.props.submitFunc();
                                }
                            }>
                            
                            {
                                submit ? submit : '确定' 
                            }
                            
                            
                           }
                            
                            
                        
                  
                }
            
           
        )
    }
}

2.调用封装的Dialog组件

{
                            /**
                             * from @marongting Tel 13269798391
                             * content 当子组件中的数据来源于inject时，调用子组件
                             * 的属性时需要使用如下方法：this.refs.子组件ref值
                             * .wrappedInstance.子组件方法
                             */
                            this.refs.Dialog.frameShow()
                        }
                    }>
                    请点击
                

 
{ 
                           
                        }
                    }
                    submitFunc = {              //弹出框右侧选项回调方法
                        ()=>{
                            console.log('console log for chrom 111',);
                        }
                    }
                    />

心得：

onPress={
this.props.cancelFunc
}

与

onPress={
()=>{
this.isFrameShow = false;
this.props.cancelFunc();
}
}

的区分，，真的是浪费了好久..以前写过，没整理，记混了。。
其实二者效果一样，只是一个只调用了父组件的方法，另外一个在调用父组件方法的同时也调用了自己的方法..
2.父组件调用子组件的值、方法：使用refs...
子组件调用父组件的值、方法：使用this.props....