React Native中使用StackNavigation如何实现视频跨屏幕切换时连续播放

你当前每个路由页面都单独引入了BackgroundVideo组件，页面切换时新页面会重新创建一个全新的Video组件实例，新实例会重新加载视频资源从头开始播放，这是重播问题的核心诱因。

把背景视频组件提升到导航容器的外层，整个应用生命周期内只初始化一次，页面切换时视频组件不会被卸载重建，自然就能保持连续播放：

1. 修改App.js，把BackgroundVideo放在导航组件的外层，作为全局背景

import StatusBar  from 'expo-status-bar';
import React from 'react';
import { StyleSheet, View } from 'react-native';
import BackgroundVideo from './Components/BackgroundVideo.js';
import NavigationHomeScreen from './Navigation/NavigationHomeScreen';

export default class App extends React.Component {
  render(){
    return (
      <View style={{flex: 1}}>
        {/* 全局背景视频，仅渲染一次 */}
        <BackgroundVideo/>
        {/* 所有路由页面都在导航容器内，层级在视频上方 */}
        <NavigationHomeScreen/> 
      </View>
    );
  }
}

2. 删掉Launchscreen.js、SignInScreen.js等所有页面内单独引入的<BackgroundVideo/>代码，避免重复渲染
3. 优化BackgroundVideo.js，增加层级控制确保视频在内容下层：

import React, { Component } from 'react';
import { View, StyleSheet,Dimensions } from 'react-native';
import { Video } from 'expo-av';

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

export default class BackgroundVideo extends Component { 
    videoRef = React.createRef();
    render() {
      return (
        <Video 
        ref={this.videoRef}
        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,
        zIndex: -1 // 确保视频在所有页面内容下方
      }
    });

如果你的需求是不同页面需要使用不同的背景视频，无法统一用全局视频，可以采用状态管理方案：

• 用React Context或其他状态管理库，全局存储当前背景视频的播放进度、播放器实例
• 每次BackgroundVideo组件挂载时，读取全局存储的播放进度，调用seekTo()方法直接跳转到对应位置继续播放，避免从头加载

内容的提问来源于stack exchange，提问作者Josh_bateman