ReactNative实战系列组件封装之Dialog（iOS和Android通用）

来源：互联网发布：单倍型分析软件编辑：程序博客网时间：2024/06/05 21:05

http://blog.csdn.net/column/details/reactnative2016.html?&page=1

《React-Native系列》1、初探React-Native

《React-Native系列》2、RN与native交互与数据传递

《React-Native系列》3、RN与native交互之Callback、Promise

《React-Native系列》4、表单界面代码编写

《React-Native系列》5、RN实现弹出选择界面与动画效果

《React-Native系列》6、Navigator语法介绍及经典应用

《React-Native系列》7、bundle文件的加载和维护

《React-Native系列》8、RN如何打离线包

《React-Native系列》9、 Networking之fetch

《React-Native系列》10、 RN组件之Text和TextInput以及注意要点

《React-Native系列》11、图解RN布局之FlexBox，三分钟上手写RN界面

《React-Native系列》12、 API模块之PixelRatio和Dimensions

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

《React-Native系列》14、 RN学习之NodeJS

《React-Native系列》15、 RN之可触摸组件

《React-Native系列》16、 RN组件之ListView

《React-Native系列》17、 RN中this所引起的undefined is not an object错误

《React-Native系列》18、 RN之定时器Timer

《React-Native系列》19、 ListView组件之上拉刷新（iOS和Android通用）

《React-Native系列》20、 RN数据流之Flux概览

《React-Native系列》21、解决RN在Android下不支持gif问题

《React-Native系列》22、 Flux框架Demo详解

《React-Native系列》23、 js实现下拉刷新效果（Android和iOS通用）

《React-Native系列》24、结合Demo学习Redux框架

《React-Native系列》25、详解Redux的connect方法

《React-Native系列》26、 ReactNative实现图片上传功能

《React-Native系列》27、 Redux的异步数据流

《React-Native系列》28、 RN之AsyncStorage

《React-Native系列》29、 RN组件之WebView

《React-Native系列》30、 RN组件间通信

《React-Native系列》31、 Fetch发送POST请求的坑与解决方案

《React-Native系列》32、基于Fetch封装HTTPUtil工具类

《React-Native系列》33、键盘遮挡问题处理

《React-Native系列》34、 ReactNative的那些坑

《React-Native系列》35、 RN在Android下支持gif的另一种方案

《React-Native系列》36、 ReactNative地图组件

《React-Native系列》37、 ReactNative百度地图开源组件使用

《React-Native系列》38、 ReactNative混合组件封装

《React-Native系列》39、 ReactNative之键盘Keyboard

《React-Native系列》40、 ReactNative之bundle文件瘦身

《React-Native系列》41、刨根问底Picker组件

《React-Native系列》42、键盘遮挡问题官方处理方法KeyboardAvoidingView

《React-Native系列》43、通用容器和导航设计方案

《React-Native系列》44、基于多个TextInput的键盘遮挡处理方案优化

《React-Native系列》45、踩坑记录

《React-Native系列》React-Native实战系列博客汇总

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

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

源码如下：

[javascript] view plain copy
 
'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 组件，加入代码：

[javascript] view plain copy
 
<Dialog ref="dialog" callback={this.callback.bind(this)}/>  

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

3、调用show方法

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

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

组件效果如下：

0 0

ReactNative实战系列 组件封装之Dialog（iOS和Android通用）