《React-Native系列》13、 组件封装之Dialog（iOS和Android通用）

最近在项目中封装了个Dialog组件，iOS和Android平台上通用。

组件Dialog显示时，从页面顶部滑动到中间，点击确认或取消后，从页面底部划出页面，需要注意动画的实现。

源码如下：

'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
View,
Image,
Text,
TouchableHighlight,
Animated,
Easing,
Dimensions,
} from 'react-native';

import TimerMixin from 'react-timer-mixin';

const {width, height} = Dimensions.get('window');
const navigatorH = 64; // navigator height
const [aWidth, aHeight] = [270, 108];
const [left, top] = [0, 0];
const [middleLeft, middleTop] = [(width - aWidth) / 2, (height - aHeight) / 2 - navigatorH];

/**
* Dialog组件
* <Dialog ref="dialog" callback={this.callback.bind(this)}/>
* 调用show方法，调起组件   this.refs.dialog.show("确定删除吗");
*/

export default class Dialog extends Component {
mixins = [TimerMixin];
parent ={};

constructor(props) {
super(props);
this.state = {
offset: new Animated.Value(0),
opacity: new Animated.Value(0),
title: "",
hide: true,
};
}

render() {
if(this.state.hide){
return (<View />)
} else {
return (
<View style={styles.container} >
<Animated.View style={ styles.mask } >
</Animated.View>

<Animated.View style={[styles.tip , {transform: [{
translateY: this.state.offset.interpolate({
inputRange: [0, 1,2],
outputRange: [0, middleTop,height]
}),
}]
}]}>
<View style={styles.tipTitleView}>
<Text style={styles.tipTitleText}>{this.state.title}</Text>
</View>

<View style={styles.btnView}>
<TouchableHighlight style={styles.cancelBtnView} underlayColor='#f0f0f0' onPress={this.cancelBtn.bind(this)}>
<Text style={styles.cancelBtnText}>取消</Text>
</TouchableHighlight>
<TouchableHighlight style={styles.okBtnView} underlayColor='#f0f0f0' onPress={this.okBtn.bind(this)}>
<Text style={styles.okBtnText}>确定</Text>
</TouchableHighlight>
</View>
</Animated.View>
</View>
);
}
}

//显示动画
in() {
Animated.parallel([
Animated.timing(
this.state.opacity,
{
easing: Easing.linear,
duration: 500,
toValue: 0.8,
}
),
Animated.timing(
this.state.offset,
{
easing: Easing.linear,
duration: 500,
toValue: 1,
}
)
]).start();
}

//隐藏动画
out(){
Animated.parallel([
Animated.timing(
this.state.opacity,
{
easing: Easing.linear,
duration: 500,
toValue: 0,
}
),
Animated.timing(
this.state.offset,
{
easing: Easing.linear,
duration: 500,
toValue: 2,
}
)
]).start();

setTimeout(
() => {
this.setState({hide: true});
//还原到顶部
Animated.timing(
this.state.offset,
{
easing: Easing.linear,
duration: 500,
toValue: 0,
}
).start();
},
500
);
}

//取消
cancelBtn(event) {
if(!this.state.hide){
this.out();
}
}

// doCallback(fn,args){
//   fn.apply(this.parent, args);
// }

//选择
okBtn() {
if(!this.state.hide){
this.out();
setTimeout(
() => {
let {callback} = this.props;
callback.apply(null,[]);
},
500
);
}
}

/**
* 弹出控件
* titile: 标题
*/
show(title: string) {
if(this.state.hide){
this.setState({title: title, hide: false}, this.in);
}
}
}

const styles = StyleSheet.create({
container: {
position:"absolute",
width:width,
height:height,
left:left,
top:top,
},
mask: {
justifyContent:"center",
backgroundColor:"#383838",
opacity:0.8,
position:"absolute",
width:width,
height:height,
left:left,
top:top,
},
tip: {
width:aWidth,
height:aHeight,
left:middleLeft,
backgroundColor:"#fff",
alignItems:"center",
justifyContent:"space-between",
},
tipTitleView: {
width:aWidth,
flexDirection:'row',
alignItems:'center',
justifyContent:'center',
borderBottomWidth:1/2,
borderColor:'#f0f0f0',
},
tipTitleText:{
color:"#333333",
fontSize:17,
marginTop:28,
marginBottom:19,
textAlignVertical:'center',
textAlign:'center',
},

btnView:{
flexDirection:'row',
height: 44,
},
cancelBtnView:{
width:aWidth/2,
height: 44,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
borderRightWidth:1/2,
borderColor:'#f0f0f0',
},
cancelBtnText: {
fontSize:17,
color:"#e6454a",
textAlign:"center",
fontWeight:'bold',
},
okBtnView:{
width:aWidth/2,
height: 44,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
okBtnText: {
fontSize:17,
color:"#e6454a",
textAlign:"center",
},

});

如果需要使用该组件，只需要3步即可：

1、在你的页面import 组件，加入代码：

<Dialog ref="dialog" callback={this.callback.bind(this)}/>

2、自定义回调方法callback，处理选中逻辑

3、调用show方法

调用show方法，调起组件   this.refs.dialog.show("确定要取消订单吗");

备注：组件的样式可以根据你的需求修改，组件的动画也可以修改。

组件效果如下：