我知道类似的问题已经在这里提出了,但我就是无法让它工作!我正在使用iframe在一个屏幕中嵌入YouTube播放器(使用Stack Navigator)。我创建了一个带有一些YouTube链接/ID的数组,然后将其随机化并导入到播放器中,这样每次我导航到特定屏幕时,随机播放一个视频!现在我想添加一个“播放下一个视频”按钮!我尝试更新屏幕的“key”并使用不同的forceUpdating屏幕的方法,但似乎都不起作用!有人有想法吗?
以下是我的代码:
请注意,“下一个视频”按钮中有playpause函数。
import React, { useState, useCallback, useRef } from "react";
import { Button, View, Alert, Text } from "react-native";
import YoutubePlayer from "react-native-youtube-iframe";
import {NeuView, NeuButton} from 'react-native-neu-element';
import { set } from "react-native-reanimated";
//example vids
const videos = [
'iNQAp2RtXBw',
'AJqiFpAl8Ew',
'IdoD2147Fik',
]
const randomVideo = () =>
videos[Math.floor(Math.random() * videos.length)];
export default function FunnyVideos() {
const [playing, setPlaying] = useState(true);
const [videoId, setRandomVideoId] = useState(randomVideo());
function pauseOrPlay() {
return ((
setPlaying(!playing)
), []);
}
return (
<View alignItems = 'center' >
<NeuView style = {{marginTop: '15%'}} width = {330} height = {200} color = '#f2f2f2' borderRadius = {20} >
<View overflow = 'hidden' height = {169} style = {{position: 'relative', marginTop: 0}} justifyContent = 'center' alignContent = 'center' borderRadius = {10}>
<YoutubePlayer
height={'100%'}
width={300}
videoId = {videoId}
play = {playing}
/>
</View>
</NeuView>
<View flexDirection = 'row'>
<NeuButton style = {{marginTop: 60}} width = {250} height = {100} color = '#f2f2f2' title={playing ? "pause" : "play"} onPress = {pauseOrPlay} borderRadius = {20}>
<Text>
{playing ? "pause" : "play"}
</Text>
</NeuButton>
</View>
<NeuButton style = {{marginTop: 45}} width = {250} height = {100} color = '#f2f2f2' title={playing ? "pause" : "play"} onPress = {pauseOrPlay} borderRadius = {20}>
<Text>
Next Video
</Text>
</NeuButton>
</View>
);
}