在此示例中,我们将实现水平的ProgressBarAndroid并在TouchableOpacity组件上执行操作。进度状态将在“Text"组件中最多显示3位数字。
要创建动画的进度条,我们需要导入TheAnimated类。在视图内添加Animated.View和Animated.Text组件。将变量进度状态初始化为0并调用onAnimate()方法。当屏幕完全加载(调用componentDidMount())时,将调用此方法。在onAnimate()方法上添加一个侦听器,以更新进度状态。
来源:LearnFk无涯教程网
App.js
import React, {Component} from 'react'; import {Platform, StyleSheet, Text, View, Animated} from 'react-native'; export default class App extends Component { state={ progressStatus: 0, } anim = new Animated.Value(0); componentDidMount(){ this.onAnimate(); } onAnimate = () =>{ this.anim.addListener(({value})=> { this.setState({progressStatus: parseInt(value,10)}); }); Animated.timing(this.anim,{ toValue: 100, duration: 50000, }).start(); } render() { return ( <View style={styles.container}> <Animated.View style={[ styles.inner,{width: this.state.progressStatus +"%"}, ]} /> <Animated.Text style={styles.label}> {this.state.progressStatus }% </Animated.Text> </View> ); } } const styles = StyleSheet.create({ container: { width: "100%", height: 40, padding: 3, borderColor: "#FAA", borderWidth: 3, borderRadius: 30, marginTop: 200, justifyContent: "center", }, inner:{ width: "100%", height: 30, borderRadius: 15, backgroundColor:"green", }, label:{ fontSize:23, color: "black", position: "absolute", zIndex: 1, alignSelf: "center", } });
进度条的进度状态以每0.5秒(50000微秒)的间隔更新。同时,进度条的宽度由进度状态确定,其状态设置为Animated.Text组件。
输出:
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)
Python实战 · 从0到1搭建直播视频平台 -〔Barry〕