如何在React Native中刷新屏幕？

Question

我知道类似的问题已经在这里提出了，但我就是无法让它工作！我正在使用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>
  ); 
}

- Swifter

Answer 1

我通常使用RefreshControl，因为它简单易用，可以在其他组件中使用，比如FlatList、ListView等。例如：<ScrollView contentContainerStyle={styles.scrollView} refreshControl={<RefreshControl refreshing={refreshing} onRefresh={yourFunctionHere} /> 您可以在官方文档https://reactnative.dev/docs/refreshcontrol中了解更多信息。

- Sultan Maulana

Answer 2

将“下一个视频”的onPress更改为() => setRandomVideoId(randomVideo())。

- maltoze

Answer 3

我正在使用类组件，使用this.state来刷新屏幕，以下是示例：

import React, { Component } 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";

const videos = [
    'iNQAp2RtXBw',
    'AJqiFpAl8Ew',
    'IdoD2147Fik',
]

export default class FunnyVideos extends Component {
    constructor(props) {
        super();
        this.state = {
            playing: true,
            videoId: videos[Math.floor(Math.random() * videos.length)],
        }
    }

    componentDidMount = () => {
        this.setState({ videoId: videos[Math.floor(Math.random() * videos.length)] });
    }


    pauseOrPlay() {
    }

    refresh = () => {
        this.componentDidMount();
    }

    render() {
        let { videoId } = this.state;
        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={this.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={this.refresh()} borderRadius={20}>
                    <Text>
                        Next Video
        </Text>
                </NeuButton>


            </View>
        );
    }
}

- Jals