如何插值和动画进度条？ "import * as Progress from 'react-native-progress';"

Question

朋友们，早上好。。。结果是：我试图制作一个逻辑，使setLoaded更改进度条的值，当它的值达到100时，它显示Modal。但什么都没有发生。当我按下播放按钮时，我希望ProgressBar开始加载它的值，当我单击暂停按钮时，它的值会停止在原来的值。有人能帮帮我吗？我工作很努力，我很沮丧我想通过播放按钮(可触摸不透明度(激活这个

import * as React from 'react';
import { useState} from 'react';
import {
Text, View, ScrollView, KeyboardAvoidingView, Image,
TouchableOpacity
} from 'react-native';
import { Entypo, Feather } from 'react-native-vector-icons';
import { Card } from 'react-native-shadow-cards';
import * as Progress from 'react-native-progress';
import { NavigationContainer } from '@react-navigation/native';
import { useNavigation } from '@react-navigation/native';
import  Modal from 'react-native-modal';
//link redefinir senha
//https://account.activedirectory.windowsazure.com/ChangePassword.aspx
const taskDetails = () => {
const navigate = useNavigation(); 
const [showHide, setShowHide] = useState(false);
const [modal, setModal] = useState(false);
const [progress, setProgress] = useState(0);
const [isLoaded, setLoaded] = useState(false); 
return (

<>
{
!isLoaded ?
<Modal isVisible={modal}>
<View 
style={{
backgroundColor: '#fff', 
paddingVertical: 20,
paddingHorizontal: 20,
alignSelf: 'center',
borderRadius: 15,
height: 480,
width: 300}}>
<Image
source={require('../../assets/images/working-hours(1).png')}
style={{alignSelf: 'center',
width: 100,
height: 100,
margin: 10,
marginTop: 20}}/>
<Text style={{
fontWeight: 'bold',
fontSize: 20,
textAlign: 'center',
padding: 10,
}}>
{'Eba! n Task finalizada com sucesso!'}
</Text>
<Text style={{textAlign: 'center'}}>
{'Suas horas nesta task foram n lançadas,volte para a home para n começar uma nova tarefa!'}
</Text>
<Text style={{
textAlign: 'center', color: '#808080', 
padding: 5, marginBottom: 10 }}>
Com isso você ganhou:
</Text>
<Image
source={require('../../assets/images/grin-stars.png')}
style={{
alignSelf: 'flex-start', marginLeft: 75,
margin: 5}}/>
<Text style={{fontSize: 20, fontWeight: 'bold',
textAlign: 'right', marginRight: 95,
bottom: 40}}>
10pts
</Text>
<Text style={{
textAlign: 'right', fontSize: 12,
marginRight: 70, bottom: 45}}>
de experiência
</Text>
<TouchableOpacity
style={{
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
marginTop: 20,
backgroundColor: '#000000',
paddingVertical: 10,
borderRadius: 10,
padding: 10,
width: 250,
height: 50,
elevation: 8, 
bottom: 30 
}}
onPress={() => setModal(false)}>
<Text style={{
color: '#fff', fontWeight: 'bold',
alignSelf: 'center',
}}>
Fechar</Text>
</TouchableOpacity>
</View>
</Modal>

:  <Progress.Bar progress={progress} 
width={200}
color={'#A0D800'}
backgroundColor={'#ECECEC'}
borderColor={'transparent'}
height={10}
borderRadius={10}
style={{alignSelf: 'center'}}
bottom={20}

/>
}
<KeyboardAvoidingView style={{
flex: 2,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff'
}}>
<ScrollView >

<View>

<TouchableOpacity>
<Card style={{ margin: 20, height: 450,
}}>
<Feather name={'file-text'}
color={'#F2CB1D'} 
size={20}
style={{paddingLeft: 20, 
top: 20,}}/>
<Text
style={{paddingLeft: 50}}>Task 59788</Text>
<Entypo name={'controller-record'}
style={{paddingLeft: 270, bottom: 14
}}
color={'#007ACC'}
size={10}
/>
<Text
style={{paddingLeft: 290, bottom: 30}}
>Active</Text>
<Text style={{fontSize: 12,
paddingLeft: 20, bottom: 15
}}>App corporativo OnlineTeam</Text>
<Text style={{
paddingLeft: 20, fontSize: 20,
bottom: 10}}>
Criar telas no Figma</Text>
<Text style={{
paddingLeft: 20, 
fontSize: 12}}>
Original Estimate: 4h</Text>
<Text style={{
paddingLeft: 250,bottom: 17,
fontSize: 12}}>
Completed: 2h</Text>

<Text style={{textAlign: 'left',
bottom: 10, fontSize: 10,
paddingLeft: 55}}>
0%</Text> 
<Progress.Bar progress={progress} 
width={200}
color={'#A0D800'}
backgroundColor={'#ECECEC'}
borderColor={'transparent'}
height={10}
borderRadius={10}
style={{alignSelf: 'center'}}
bottom={20}

/>
<Text style={{textAlign: 'right',
fontSize: 10,bottom: 35, 
paddingRight: 45}}>
100%</Text>
<View
style={{
borderBottomColor: '#ECECEC',
borderBottomWidth: 1,
alignSelf: 'center',
marginBottom: 20,
width: 300,

}}
/>
<Text style={{fontSize: 15, color: "#A0D800",
paddingLeft: 20, }}>
Detalhes da task</Text>
<Text style={{color: "#808080", alignContent: 'center',
padding: 15}}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae enim nisl. 
Proin iaculis eu felis sed cursus. In facilisis eleifend nisl,
at efficitur diam placerat ut. Aliquam neque nulla, convallis
a eleifend eget, elementum ut quam. Aliquam gravida mauris
auctor, gravida nisi vel, lobortis tellus. Donec ac velit vulputate, 
dictum neque vitae, tempus velit. Donec placerat in mauris vel porttitor. 
Mauris viverra ante a suscipit gravida. Mauris fringilla erat felis, eu 
facilisis erat laoreet ultrices.
</Text>
</Card>
</TouchableOpacity>
<TouchableOpacity style={{
borderRadius: 10,
alignItems: "center",
backgroundColor: "#A0D800",
height: 50, width: 50,marginLeft: 25
}}
onPress = { () => setLoaded(isLoaded)
}>
<Image
source={require('../../assets/images/play(1).png')}
style={{alignSelf: 'center',padding: 5,
marginTop: 15}}/>
</TouchableOpacity>
<TouchableOpacity style={{
backgroundColor: "#000000",
height: 50, width: 300,marginLeft: 20,
borderRadius: 10, alignSelf: 'flex-end',
bottom: 50, marginRight: 20
}}>

<Text style={{textAlign: 'center', color: '#fff',
fontSize: 16, fontWeight: 'bold', paddingTop: 10,
margin: 5

}}>
Pausar task
</Text>
<Image
source={require('../../assets/images/pause.png')}
style={{alignSelf: 'flex-start', marginRight: 15,
bottom: 25, marginLeft: 75}}/>
</TouchableOpacity>

</View>  

</ScrollView>
</KeyboardAvoidingView>
</>
)
}
export default taskDetails;

Answer 1

不确定这应该如何工作，但您应该能够调试自己的程序。

我看到的一件事是setLoaded(isLoaded)，那就是什么都不做。你正在用旧状态设置状态，什么都不会发生。尝试setLoaded(!isLoaded)使其切换。如果状态不变，则不会发生重新渲染。

Answer 2

我是基于的逻辑

const [progress, setProgress] = useState(0);
const [isLoaded, setLoaded] = useState(false); 100
{
!isLoaded ?
<Progress.Bar progress = {progress} width={null} />
:  null
}
<Progress.Bar progress = {progress} width={null} />
onLoadProgress={(nativeEvent) => setProgress(nativeEvent.progress)}
onLoadEnd ={() => setLoaded(true)}

Answer 3

我想知道如何将其添加到我的代码的逻辑中

import React, {useRef, useState, useEffect} from 'react';
import { Text, View, StyleSheet, Animated } from 'react-native';
import Constants from 'expo-constants';
function useInterval(callback, delay) {
const savedCallback = useRef();
// Remember the latest callback.
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
// Set up the interval.
useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
let id = setInterval(tick, delay);
return () => clearInterval(id);
}
}, [delay]);
}

const App = () => {
let animation = useRef(new Animated.Value(0));
const [progress, setProgress] = useState(0);
useInterval(() => {
if(progress < 100) {
setProgress(progress + 5);
}
}, 1000);
useEffect(() => {
Animated.timing(animation.current, {
toValue: progress,
duration: 100
}).start();
},[progress])
const width = animation.current.interpolate({
inputRange: [0, 100],
outputRange: ["0%", "100%"],
extrapolate: "clamp"
})
return (
<View style={styles.container}>
<Text>
Loading…..
</Text>
<View style={styles.progressBar}>
<Animated.View style={[StyleSheet.absoluteFill], {backgroundColor: "#8BED4F", width }}/>
</View>
<Text>
{`${progress}%`}
</Text>
</View>
);
}
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'Column',
justifyContent: 'center',
alignItems: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
progressBar: {
flexDirection: 'row',
height: 20,
width: '100%',
backgroundColor: 'white',
borderColor: '#000',
borderWidth: 2,
borderRadius: 5
}
});