在開始寫彈框之前恭取，需要確定實(shí)現(xiàn)以下效果：
效果需求：
1.點(diǎn)擊請(qǐng)點(diǎn)擊彈出彈框。
2.彈框的頭部耗跛、中間內(nèi)容、選項(xiàng)塊的內(nèi)容均為可變的调塌。
3.彈框的大小隨著框內(nèi)內(nèi)容的多少成比例擴(kuò)大晋南。
4.選項(xiàng)塊的數(shù)量也可變负间，暫定最少1個(gè)，最多2個(gè)政溃。
5.點(diǎn)擊選項(xiàng)塊后實(shí)現(xiàn)回調(diào)方法态秧，也可不回調(diào)董虱，也可能傳的回調(diào)方法為空愤诱。
6.不能用modal,因?yàn)楫?dāng)兩個(gè)modal同時(shí)出現(xiàn)時(shí)項(xiàng)目會(huì)崩捐友，可用position實(shí)現(xiàn)。
技術(shù)點(diǎn)：
1.可利用mobox的觀察者匣砖、也可用setState
2.彈框?yàn)榉庋b好的組件，父組件中不可再使用state控制彈框的出現(xiàn)與否脆粥，而需要在彈框組件內(nèi)部暴露出一個(gè)修改彈框內(nèi)容state的函數(shù)砌溺，父組件用ref調(diào)用规伐。
3.當(dāng)子組件中使用了inject()方法調(diào)取數(shù)據(jù)時(shí)匣缘，注意this.refs.子組件ref值.子組件函數(shù)是會(huì)報(bào)錯(cuò)的猖闪，需要使用this.refs.子組件ref值.wrappedInstance.子組件方法
4.也可以為observable的數(shù)據(jù)與action封裝一個(gè)store培慌，只有調(diào)用它的store后才會(huì)刷新父組件柑爸。
實(shí)現(xiàn)過程：
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 彈窗是否出現(xiàn)控制器
*/
@observable isFrameShow = false;
constructor(props){
super(props);
}
frameShow =() =>{
this.isFrameShow = !this.isFrameShow;
}
render(){
const {title,content,isCancel,isSubmit,cancel,submit} = this.props;
return(
<View style={{
position:'absolute'}}>
{
this.isFrameShow &&
<View style={{width:width,height:height,
backgroundColor:'rgba(0,0,0,0.5)',
position:'absolute',
alignItems:'center',
justifyContent:'center'}}>
<View style={{
borderRadius:getPixel(10),
backgroundColor:'#fff'}}>
<View style={{
alignItems:'center',
justifyContent:'center',
borderBottomWidth:StyleSheet.hairlineWidth,
borderBottomColor:'#cdcdcd',
}}>
<Text allowFontScaling={false} style={{
fontSize:getPixel(18),
fontWeight:'bold',
lineHeight:getPixel(20),
marginHorizontal:getPixel(100),
marginTop:getPixel(20)
}}>
{
title ? title : '提示'
}
</Text>
<Text allowFontScaling={false} style={{
fontSize:getPixel(16),
lineHeight:getPixel(20),
marginVertical:getPixel(15),
marginHorizontal:getPixel(20),
maxWidth:getPixel(250),
}}>
{
content ? content :'確定要退出登錄？'
}
</Text>
</View>
<View style={{
flexDirection:'row',
}}>
{
isCancel &&
<TouchableOpacity style={{
flex:1,
alignItems:'center',
justifyContent:'center',
}}
onPress={
()=>{
this.isFrameShow = false;
this.props.cancelFunc && this.props.cancelFunc()
}
}>
<Text style={{
fontSize:getPixel(20),
color:'green',
lineHeight:getPixel(45)
}}>
{
cancel ? cancel :'取消'
}
</Text>
</TouchableOpacity>
}
{
isCancel && isSubmit &&
<View style={{
width:StyleSheet.hairlineWidth,
height:getPixel(45),
backgroundColor:'#cdcdcd'
}}></View>
}
{
isSubmit &&
<TouchableOpacity style={{
alignItems:'center',
justifyContent:'center',
flex:1,
}} onPress={
()=>{
this.isFrameShow = false;
this.props.submitFunc && this.props.submitFunc();
}
}>
<Text style={{
fontSize:getPixel(20),
color:'green',
lineHeight:getPixel(45)
}}>
{
submit ? submit : '確定'
}
</Text>
</TouchableOpacity>
}
</View>
</View>
</View>
}
</View>
)
}
}
2.調(diào)用封裝的Dialog組件
<TouchableOpacity
style={{marginVertical:100}}
onPress={
()=>{
/**
* from @marongting Tel 13269798391
* content 當(dāng)子組件中的數(shù)據(jù)來源于inject時(shí)，調(diào)用子組件
* 的屬性時(shí)需要使用如下方法：this.refs.子組件ref值
* .wrappedInstance.子組件方法
*/
this.refs.Dialog.frameShow()
}
}>
<Text>請(qǐng)點(diǎn)擊</Text>
</TouchableOpacity>
<Dialog
ref='Dialog'
// title='標(biāo)題' //彈出框頭部?jī)?nèi)容
// content='不再玩會(huì)嗎' //彈出框內(nèi)容
// cancel='狠心離開' //彈出框左側(cè)選項(xiàng)內(nèi)容
// submit='繼續(xù)' //彈出框右側(cè)選項(xiàng)內(nèi)容
isCancel={true} //彈出框左側(cè)選項(xiàng)控制器
isSubmit={true} //彈出框右側(cè)選項(xiàng)控制器
cancelFunc = { //彈出框左側(cè)選項(xiàng)回調(diào)方法
()=>{
}
}
submitFunc = { //彈出框右側(cè)選項(xiàng)回調(diào)方法
()=>{
console.log('console log for chrom 111',);
}
}
/>
心得：
onPress={
this.props.cancelFunc
}
與
onPress={
()=>{
this.isFrameShow = false;
this.props.cancelFunc();
}
}
的區(qū)分雄坪，维哈，真的是浪費(fèi)了好久..以前寫過，沒整理登澜，記混了。帖渠。
其實(shí)二者效果一樣，只是一個(gè)只調(diào)用了父組件的方法，另外一個(gè)在調(diào)用父組件方法的同時(shí)也調(diào)用了自己的方法..
2.父組件調(diào)用子組件的值切揭、方法：使用refs...
子組件調(diào)用父組件的值、方法：使用this.props....
