如何在屏幕之间继续播放带有StackNavigation的视频？

Question

大家好，我试着用一个视频作为几个屏幕的背景，但问题是当我试图在另一个屏幕中重新使用BackgroundVideo.js时，当我在屏幕之间切换时，视频会在开始时停止并重放(Lauchscreen到SignInScreen)。我想让这一切继续下去，而不是视频重播。能给我个主意吗？

谢谢

BackgroundVideo.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>

Navigation.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,
        }
    },
})

App.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/> 
    );
  }
}

Answer 1

你不能这样做。首先，为Launchscreen和SignInScreen制作一个通用屏幕，并使用这两个屏幕作为组件。

在你的内心CommonScreen.js

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

当您从启动屏幕移动到登录屏幕时，更改isLaunch变量

注意-确保添加适当的样式，使您的视频出现在屏幕组件下面，同时也从两个屏幕组件中删除视频。

Answer 2

解决了!

就像@beingbalder说的那样，我把我的Launchscreen和我的SignInView放在一个普通的屏幕中，然后，我使用这个方法()将状态从子("CommonViewLaunch")返回到我的父组件(“CommonViewLaunch”)，并在按下Launchscreen中的touchableOpacity按钮时更改变量"isLaunch“的状态。

非常感谢！

Answer 3

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

但是您也可以将视频的当前位置传递到下一个屏幕videoRef.getStatusAsync()。并使用videoRef.setPositionAsync(millis)设置视频在下一个屏幕上的起始位置。