如何在 React Native 中使用 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

最佳答案是。

但你也可以只将视频的当前位置传递到下一个屏幕videoRef.getStatusAsync()。并使用 videoRef.setPositionAsync(millis)

设置下一个屏幕上视频的起始位置

Answer 3

已解决！

就像@beingbalder 说的，我把我的 Launchscreen 和我的 SignInView 放在一个公共屏幕上，然后，我用这个方法（https://ourcodeworld.com/articles/read/409/how-to-update-parent-state-from-child-component-in-react）到 return 从子组件（“Launchscreen”）到我的父组件（“CommonViewLaunch”）的状态，并在按下 Launchscreen 中的 touchableOpacity 按钮时更改变量“isLaunch”的状态。

非常感谢！

如何在 React Native 中使用 StackNavigation 在屏幕之间继续播放视频？

How to continue a video between Screens with StackNavigation in React Native?

video

reactjs

react-native

react-navigation

stack-navigator