怎么在React中利用Native实现一个进度条弹框
怎么在React中利用Native实现一个进度条弹框?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
我们提供的服务有:做网站、网站设计、微信公众号开发、网站优化、网站认证、眉山ssl等。为1000+企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的眉山网站制作公司
首先实现进度条。
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 (); } } 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 (); } } 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; {title} {needCancle && {`${progress}`}% {`${progress}`}/100 } {cancleText}
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 () } } export default Upload;
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。
网站题目:怎么在React中利用Native实现一个进度条弹框
文章起源:http://pwwzsj.com/article/jgicee.html