Javascript 如何在Press上重新启动EXPOAV视频

我正在构建一个测验，从数据数组中随机 Select 20个项目.每个测验问题播放一段带有柔道技术的视频，参赛者试图识别所示的技术.一旦答案被点击(对或错)，它就会计算分数，然后转到下一个视频.

PROBLEM-即使它应该在props 中使用，它也不能在装载状态下使用.奇怪的是，视频会在游戏结束后自动播放，你可以再次点击播放.当我加载屏幕并手动播放时，如果我暂停它，我会注意到测验中的下一个项目加载了下一个视频，但它从我暂停前一个视频的位置开始播放--这让我完全迷惑了.

SOLUTION-本质上，每个问题从头开始自动播放.我对原住民的react 有点新手，但我相信你们中的一些人可能会觉得这是一个相当愚蠢的问题，呵呵

我感谢你的帮助

import React, {useState, useEffect} from 'react'
import { StyleSheet, Text, View } from 'react-native'
import * as Progress from 'react-native-progress';
import theme from '../assets/theme'
import CustomButton from './CustomButton';
import { Video } from 'expo-av';

const VideoPlay = ({data, shouldPlay}) => {
  return (
    <View style={styles.videoitems}>
      <Video
        source={{ uri: `https://judopedia.wiki/assets/videos/${data}` }}
        resizeMode="contain"
        shouldPlay={shouldPlay}
        style={styles.video}
        useNativeControls
      />
    </View>
  )
}


const VideoTriviaGame = ({data}) => {
  const [currentQuestion, setCurrentQuestion] = useState(0)
  const [score, setScore] = useState(0)
  const [showScore, setShowScore] = useState(false)
  const [quizData, setQuizData] = useState([]);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const random = [...data].sort(() => Math.random()).slice(0, 20);
    setQuizData(random);
  }, [])

  const handleAnswer = (selectedAnswer) => {
    const answer = quizData[currentQuestion]?.answer;

    if(answer === selectedAnswer){
      setScore((prevScore)=> prevScore + 1)
    }

    handleNextQuestion()
  }

  const handleNextQuestion = () => {
    const nextQuestion = currentQuestion + 1;
    if(nextQuestion < quizData.length){
      setCurrentQuestion(nextQuestion)
      if (progress < quizData.length - 1) {
        setProgress(progress + .05);
      }
    } else {
      setShowScore(true)
    }
  }

  const handleRestart = () => {
    setCurrentQuestion(0)
    setScore(0)
    setShowScore(false)
    setProgress(0);
  }

  return (
    <View style={{flex:1}}>
      {showScore 
        ? null
        : <VideoPlay data={quizData[currentQuestion]?.url} shouldPlay/>
      }
      {showScore 
        ? 
          <View style={styles.gamecnt}>
            <View style={{flex:1, alignItems:"center", justifyContent:"center", width:"100%"}}>
              <Text style={{color: theme.colors.white, fontSize:24, textAlign:"center", marginBottom:10}}>
                You scored {score} out of {quizData.length}
              </Text>

              <View style={styles.btnGroup}>
                <CustomButton text="Play Again" primary onPress={handleRestart}/>                
              </View>
            </View>
            
          </View>
        :           
          <View style={styles.gamecnt}>
            <View style={{display:"flex", alignItems:"center"}}>
              <Text style={styles.counter}> 
                {Math.round(progress * 20) + 1 } of {quizData.length}
              </Text>
              <Progress.Bar 
                progress={progress+0.05} 
                width={300} 
                animated={true}
                unfilledColor={theme.colors.darkgray}
                color={theme.colors.primaryend}
                height={8} 
                borderWidth={0} />
            </View>
            <View style={styles.btnGroup}>
              {quizData[currentQuestion]?.options.map((item, index) => (                
                <CustomButton 
                  key={index}
                  onPress={() => handleAnswer(item)}
                  text={item} primary 
                />
              ))}
            </View>
          </View>          
      }        
    </View>
  )
}

export default VideoTriviaGame

const styles = StyleSheet.create({  
  counter:{
    color: theme.colors.white, 
    fontSize:18, 
    fontWeight:"bold",
  },
  gamecnt:{
    flex:1, 
    alignItems:"center", 
    justifyContent:"start",
  },
  btnGroup:{
    width:"100%",
  },
  videoitems: {
    flex: 1,
    width: '100%',
    backgroundColor: '#000',
    alignItems: 'center',
    justifyContent: 'center',
  },
  video: {
    width: '100%',
    height: '100%',
  }
})