React Native实现进度条弹框的示例代码
本文介绍了ReactNative实现进度条弹框，分享给大家
我们在上传或者下载文件时候，希望有一个进度条弹框去提醒用户取当前正在上传或者下载，也允许用去取点击取消上传或者下载。
首先实现进度条。
importReact,{
PureComponent
}from'react';
import{
StyleSheet,
View,
Animated,
Easing,
}from'react-native';
classBarextendsPureComponent{
constructor(props){
super(props);
this.progress=newAnimated.Value(this.props.initialProgress||0);
}
staticdefaultProps={
style:styles,
easing:Easing.inOut(Easing.ease)
}
componentWillReceiveProps(nextProps){
if(this.props.progress>=0&&this.props.progress!==nextProps.progress){
this.update(nextProps.progress);
}
}
shouldComponentUpdate(){
returnfalse;
}
update(progress){
Animated.spring(this.progress,{
toValue:progress
}).start();
}
render(){
return(
进度条的值我们用动画实现，避免使用state不断去重新render渲染界面，同时设置shouldComponentUpdate返回值为false，避免重新render。
实现进度条弹框。
importReact,{
PropTypes,
PureComponent
}from'react';
import{
View,
StyleSheet,
Modal,
Text,
Dimensions,
TouchableOpacity
}from'react-native';
importBarfrom'./Bar';
const{
width
}=Dimensions.get('window');
classProgressBarDialogextendsPureComponent{
constructor(props){
super(props);
}
staticpropTypes={
...Modal.propTypes,
title:PropTypes.string,
canclePress:PropTypes.func,
cancleText:PropTypes.string,
needCancle:PropTypes.bool
};
staticdefaultProps={
animationType:'none',
transparent:true,
progressModalVisible:false,
onShow:()=>{},
onRequestClose:()=>{},
onOutSidePress:()=>{},
title:'上传文件',
cancleText:'取消是',
canclePress:()=>{},
needCancle:true
}
render(){
const{
animationType,
transparent,
onRequestClose,
progress,
title,
canclePress,
cancleText,
needCancle,
progressModalVisible
}=this.props;
return(
{title}
{`${progress}`}%
{`${progress}`}/100
{needCancle&&
{cancleText}
}
);
}
}
conststyles=StyleSheet.create({
progressBarView:{
flex:1,
justifyContent:'center',
alignItems:'center',
backgroundColor:'rgba(0,0,0,0.2)'
},
barStyle:{
marginLeft:10,
marginRight:10,
width:width-80
},
progressLeftText:{
fontSize:14
},
cancleContainer:{
justifyContent:'center',
alignItems:'flex-end'
},
progressRightText:{
fontSize:14,
color:'#666666'
},
barBackgroundStyle:{
backgroundColor:'#cccccc'
},
progressContainer:{
flexDirection:'row',
padding:10,
justifyContent:'space-between'
},
subView:{
marginLeft:30,
marginRight:30,
backgroundColor:'#fff',
alignSelf:'stretch',
justifyContent:'center'
},
progressView:{
flexDirection:'row',
padding:10,
paddingBottom:5,
justifyContent:'space-between'
},
title:{
textAlign:'left',
padding:10,
fontSize:16
},
cancleButton:{
padding:10
},
cancleText:{
textAlign:'right',
paddingTop:0,
fontSize:16,
color:'rgba(0,122,255,1)'
}
});
exportdefaultProgressBarDialog;
props
- modal的props-这些都是modal的属性
- animationType-动画类型
- transparent-是否透明
- progressModalVisible-是否可见
- onShow-弹框出现
- onRequestClose-弹框请求消失(比如安卓按返回键会触发这个方法)
- onOutSidePress-点击弹框外部动作
- title-弹框的标题
- cancleText-取消的文字
- canclePress-取消动作
- needCancle-是否需要取消按钮
使用代码
importReact,{
PureComponent
}from'react';
import{
View
}from'react-native';
importProgressBarDialogfrom'./ProgressBarDialog';
classUploadextendsPureComponent{
constructor(props){
this.state={
progress:0,
progressModalVisible:false
};
}
refProgressBar=(view)=>{
this.progressBar=view;
}
showProgressBar=()=>{
this.setState({
progressModalVisible:true
});
}
dismissProgressBar=()=>{
this.setState({
progress:0,
progressModalVisible:false
});
}
setProgressValue=(progress)=>{
this.setState({
progress
});
}
onProgressRequestClose=()=>{
this.dismissProgressBar();
}
canclePress=()=>{
this.dismissProgressBar();
}
render(){
return(
)
}
}
exportdefaultUpload;
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。