React Native实现进度条弹框的示例代码

React Native实现进度条弹框的示例代码

本文介绍了React Native实现进度条弹框，分享给大家

我们在上传或者下载文件时候，希望有一个进度条弹框去提醒用户取当前正在上传或者下载，也允许用去取点击取消上传或者下载。

首先实现进度条。

import React, {

PureComponent

} from 'react';

import {

StyleSheet,

View,

Animated,

Easing,

} from 'react-native';

class Bar extends PureComponent {

constructor(props) {

super(props);

this.progress = new Animated.Value(this.props.initialProgress || 0);

}

static defaultProps = {

style: styles,

easing: Easing.inOut(Easing.ease)

}

componentWillReceiveProps(nextProps) {

if (this.props.progress >= 0 && this.props.progress !== nextProps.progress) {

this.update(nextProps.progress);

}

}

shouldComponentUpdate() {

return false;

}

update(progress) {

Animated.spring(this.progress, {

toValue: progress

}).start();

}

render() {

return (

inputRange: [0, 100],

outputRange: [0 * this.props.style.width, 1 * this.props.style.width],

})} ]}

/>

);

}

}

var styles = StyleSheet.create({

background: {

backgroundColor: '#bbbbbb',

height: 5,

overflow: 'hidden'

},

fill: {

backgroundColor: 'rgba(0, 122, 255, 1)',

height: 5

}

});

export default Bar;

进度条的值我们用动画实现，避免使用state不断去重新render渲染界面，同时设置shouldComponentUpdate返回值为false，避免重新render。

实现进度条弹框。

import React, {

PropTypes,

PureComponent

} from 'react';

import {

View,

StyleSheet,

Modal,

Text,

Dimensions,

TouchableOpacity

} from 'react-native';

import Bar from './Bar';

const {

width

} = Dimensions.get('window');

class ProgressBarDialog extends PureComponent {

constructor(props) {

super(props);

}

static propTypes = {

...Modal.propTypes,

title: PropTypes.string,

canclePress: PropTypes.func,

cancleText: PropTypes.string,

needCancle: PropTypes.bool

};

static defaultProps = {

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 (

animationType={animationType}

transparent={transparent}

visible={progressModalVisible}

onRequestClose={onRequestClose}>

{title}

ref={this.refBar}

style={{marginLeft: 10,marginRight: 10,width:width - 80}}

progress={progress}

backgroundStyle={styles.barBackgroundStyle}

/>

{`${progress}`}%

{`${progress}`}/100

{needCancle &&

{cancleText}

}

);

}

}

const styles = 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)'

}

});

export default ProgressBarDialog;

props

modal的props - 这些都是modal的属性

animationType - 动画类型

transparent - 是否透明

progressModalVisible - 是否可见

onShow - 弹框出现

onRequestClose - 弹框请求消失(比如安卓按返回键会触发这个方法)

onOutSidePress - 点击弹框外部动作

title - 弹框的标题

cancleText - 取消的文字

canclePress - 取消动作

needCancle - 是否需要取消按钮

使用代码

import React , {

PureComponent

} from 'react';

import {

View

} from 'react-native';

import ProgressBarDialog from './ProgressBarDialog';

class Upload extends PureComponent {

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 (

ref={this.refProgressBar}

progress={this.state.progress}

progressModalVisible={this.state.progressModalVisible}

onRequestClose={this.onProgressRequestClose}

canclePress={this.canclePress}

needCancle={true}

/>

)

}

}

export default Upload;

inputRange: [0, 100],

outputRange: [0 * this.props.style.width, 1 * this.props.style.width],

})} ]}

/>

);

}

}

var styles = StyleSheet.create({

background: {

backgroundColor: '#bbbbbb',

height: 5,

overflow: 'hidden'

},

fill: {

backgroundColor: 'rgba(0, 122, 255, 1)',

height: 5

}

});

export default Bar;

进度条的值我们用动画实现，避免使用state不断去重新render渲染界面，同时设置shouldComponentUpdate返回值为false，避免重新render。

实现进度条弹框。

import React, {

PropTypes,

PureComponent

} from 'react';

import {

View,

StyleSheet,

Modal,

Text,

Dimensions,

TouchableOpacity

} from 'react-native';

import Bar from './Bar';

const {

width

} = Dimensions.get('window');

class ProgressBarDialog extends PureComponent {

constructor(props) {

super(props);

}

static propTypes = {

...Modal.propTypes,

title: PropTypes.string,

canclePress: PropTypes.func,

cancleText: PropTypes.string,

needCancle: PropTypes.bool

};

static defaultProps = {

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 (

animationType={animationType}

transparent={transparent}

visible={progressModalVisible}

onRequestClose={onRequestClose}>

{title}

ref={this.refBar}

style={{marginLeft: 10,marginRight: 10,width:width - 80}}

progress={progress}

backgroundStyle={styles.barBackgroundStyle}

/>

{`${progress}`}%

{`${progress}`}/100

{needCancle &&

{cancleText}

}

animationType={animationType}

transparent={transparent}

visible={progressModalVisible}

onRequestClose={onRequestClose}>

{title}

ref={this.refBar}

style={{marginLeft: 10,marginRight: 10,width:width - 80}}

progress={progress}

backgroundStyle={styles.barBackgroundStyle}

/>

{`${progress}`}%

{`${progress}`}/100

{needCancle &&

{cancleText}

}

ref={this.refBar}

style={{marginLeft: 10,marginRight: 10,width:width - 80}}

progress={progress}

backgroundStyle={styles.barBackgroundStyle}

/>

{`${progress}`}%

{`${progress}`}/100

{needCancle &&

{cancleText}

}

);

}

}

const styles = 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)'

}

});

export default ProgressBarDialog;

props

modal的props - 这些都是modal的属性

animationType - 动画类型

transparent - 是否透明

progressModalVisible - 是否可见

onShow - 弹框出现

onRequestClose - 弹框请求消失(比如安卓按返回键会触发这个方法)

onOutSidePress - 点击弹框外部动作

title - 弹框的标题

cancleText - 取消的文字

canclePress - 取消动作

needCancle - 是否需要取消按钮

使用代码

import React , {

PureComponent

} from 'react';

import {

View

} from 'react-native';

import ProgressBarDialog from './ProgressBarDialog';

class Upload extends PureComponent {

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 (

ref={this.refProgressBar}

progress={this.state.progress}

progressModalVisible={this.state.progressModalVisible}

onRequestClose={this.onProgressRequestClose}

canclePress={this.canclePress}

needCancle={true}

/>

)

}

}

export default Upload;

ref={this.refProgressBar}

progress={this.state.progress}

progressModalVisible={this.state.progressModalVisible}

onRequestClose={this.onProgressRequestClose}

canclePress={this.canclePress}

needCancle={true}

/>

)

}

}

export default Upload;

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。