如何在ReactNative中使用StackNavigation在螢屏之間繼續播放視頻？

大家好，我正在嘗試將視頻用作多個螢屏的背景，但問題是當我嘗試在另一個螢屏中重新使用 BackgroundVideo.js 時，視頻會在開始時停止并重播在螢屏（Lauchscreen 到 SignInScreen）之間切換。我想讓這個繼續而不是視頻重播。請給個主意？

謝謝

背景視頻.js :

import React, { Component, Fragment } from 'react';
import { View, StyleSheet,Dimensions, Button, Pressable, TouchableOpacity, SafeAreaView, Text } from 'react-native';
import { Video, AVPlaybackStatus } from 'expo-av';
import { assertStatusValuesInBounds } from 'expo-av/build/AV';

const { width, height } = Dimensions.get("window");

export default class BackgroundVideo extends Component { 
    render() {
      return (
        <Video 
        source={require("/Users/joshuabonifond/DoneWithIt/assets/BackgroundVideo.mp4")}
        rate={1.0} 
        isMuted={true} 
        resizeMode="cover"
        shouldPlay 
        isLooping style={styles.backgroundVideoStyle} 
        />
        );
      }
    }

const styles = StyleSheet.create({ 
    backgroundVideoStyle: { 
        flex : 1,
        height: height, 
        position: "absolute", 
        top: 0, 
        left: 0, 
        alignItems: "stretch", 
        bottom: 0, 
        right: 0, 
      }
    });

Launchscreen.js

import React, { Component, Fragment } from 'react';
import { View, StyleSheet,Dimensions, Button, Pressable, TouchableOpacity, SafeAreaView, Text } from 'react-native';
import { Video, AVPlaybackStatus } from 'expo-av';
import { assertStatusValuesInBounds } from 'expo-av/build/AV';

import BackgroundVideo from './BackgroundVideo.js';

const { width, height } = Dimensions.get("window");

export default class Launchscreen extends Component { 
  render() {
    return ( 
      <View style = {styles.container}>  
        <BackgroundVideo/>

        <Text style = {styles.TextTitle}>
          First app !
          {'\n'} {'\n'}
          Hello There
        </Text>

導航.js

import { getActiveChildNavigationOptions } from 'react-navigation';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';

import Launchscreen from '../Components/Launchscreen';
import SignInScreen from '../Components/SignInScreen';

const HomeScreenStackNavigator = createStackNavigator({
    LaunchscreenView:{
        screen: Launchscreen,
        navigationOptions:{
            headerShown: false,
        }
    },
    SignInScreenView: {
        screen: SignInScreen,
        navigationOptions:{
            headerShown: false,
        }
    },
})

應用程式.js

import StatusBar  from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import Launchscreen from './Components/Launchscreen';

import NavigationHomeScreen from './Navigation/NavigationHomeScreen';

export default class App extends React.Component {
  render(){
    return (
      <NavigationHomeScreen/> 
    );
  }
}

uj5u.com熱心網友回復：

你不能這樣做。首先為 Launchscreen 和 SignInScreen 創建一個公共螢屏，并將這兩個螢屏用作組件。

在你里面 CommonScreen.js

<View>
<BackgroundVideo/>
{isLaunch ? <Launchscreen/>:<SignInScreenView/>}
</View>

從啟動螢屏移動到登錄螢屏時更改 isLaunch 變數

注意 - 確保添加正確的樣式，以便您的視頻出現在螢屏組件下方，同時從兩個螢屏組件中洗掉視頻。

uj5u.com熱心網友回復：

最好的答案是https://stackoverflow.com/a/69676488/10665516。

但是您也可以將視頻的當前位置傳遞到下一個螢屏videoRef.getStatusAsync()。并使用在下一個螢屏上設定視頻的起始位置videoRef.setPositionAsync(millis)

uj5u.com熱心網友回復：

解決 ！

就像@beingbalder 所說的那樣，我將 Launchscreen 和 SignInView 放在一個公共螢屏中，然后我使用了這種方法（https://ourcodeworld.com/articles/read/409/how-to-update-parent-state-from- child-component-in-react）將狀態從子組件（“Launchscreen”）回傳到我的父組件（“CommonViewLaunch”），并在我按下 Launchscreen 中的 touchableOpacity 按鈕時更改變數“isLaunch”的狀態。

非常感謝 ！

標籤：反应 反应原生 视频 反应导航 堆栈导航器

上一篇：如何在反應中將函式轉換為基于類的組件？

下一篇：Canvasarc()-在前后獲取坐標