如何在react-navigation多屏间共享<Video>组件实现无缝过渡？

当然可以实现！核心思路是把<Video>组件从具体页面中抽离到全局层级容器，脱离react-navigation的页面生命周期控制，再通过状态管理它的尺寸、位置和显示状态，配合导航事件同步切换，就能避免重新渲染带来的缓冲延迟，还能实现平滑的尺寸过渡动画。

下面是具体的实现步骤和示例：

1. 将Video组件提升到全局层级 #

不要把<Video>放在单个页面组件里，而是放到根组件（比如App.js）中，放在NavigationContainer的同级位置。这样导航页面切换时，视频组件不会被卸载，播放状态完全保留。

同时用状态（或Context）管理视频的关键属性：比如是否全屏、尺寸、位置等。

2. 监听导航事件同步状态 #

借助react-navigation的导航事件（比如focus/blur）或者页面跳转时的主动触发，同步更新视频组件的状态，实现从缩略图到全屏的切换。

3. 添加平滑过渡动画 #

用React Native的Animated或Reanimated库，把视频的尺寸、位置绑定到动画值，在状态切换时启动动画，实现无缝过渡效果。

示例代码片段 #

根组件（App.js）

import { View, Animated, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import ThumbnailPage from './ThumbnailPage';
import FullscreenPage from './FullscreenPage';
import { useState, useRef } from 'react';
import Video from 'react-native-video'; // 假设用的是这个视频库

const Stack = createStackNavigator();

export default function App() {
  // 控制视频是否全屏的状态
  const [isFullscreen, setIsFullscreen] = useState(false);
  // 动画值：控制视频的宽高
  const animatedWidth = useRef(new Animated.Value(320)).current;
  const animatedHeight = useRef(new Animated.Value(180)).current;

  // 切换全屏/缩略图的方法，包含动画
  const toggleVideoSize = () => {
    const targetWidth = isFullscreen ? 320 : '100%';
    const targetHeight = isFullscreen ? 180 : '100%';
    
    Animated.parallel([
      Animated.timing(animatedWidth, {
        toValue: targetWidth,
        duration: 300,
        useNativeDriver: false,
      }),
      Animated.timing(animatedHeight, {
        toValue: targetHeight,
        duration: 300,
        useNativeDriver: false,
      }),
    ]).start(() => setIsFullscreen(!isFullscreen));
  };

  return (
    <View style={styles.container}>
      {/* 导航容器 */}
      <NavigationContainer>
        <Stack.Navigator screenOptions={{ headerShown: false }}>
          <Stack.Screen name="Thumbnail">
            {(props) => <ThumbnailPage {...props} toggleVideoSize={toggleVideoSize} />}
          </Stack.Screen>
          <Stack.Screen name="Fullscreen">
            {(props) => <FullscreenPage {...props} toggleVideoSize={toggleVideoSize} />}
          </Stack.Screen>
        </Stack.Navigator>
      </NavigationContainer>

      {/* 全局层级的Video组件 */}
      <Animated.View
        style={{
          position: 'absolute',
          width: animatedWidth,
          height: animatedHeight,
          top: isFullscreen ? 0 : 40,
          left: isFullscreen ? 0 : 20,
          zIndex: 999, // 确保视频在最上层，不被页面遮挡
        }}
      >
        <Video
          source={{ uri: '你的视频地址' }}
          style={styles.video}
          resizeMode="cover"
          paused={false} // 保持播放状态
        />
      </Animated.View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  video: {
    flex: 1,
  },
});

缩略图页面（ThumbnailPage.js）

import { Button, View, StyleSheet } from 'react-native';
import { useNavigation } from '@react-navigation/native';

export default function ThumbnailPage({ toggleVideoSize }) {
  const navigation = useNavigation();

  const goToFullscreen = () => {
    // 先触发尺寸动画，再跳转页面
    toggleVideoSize();
    navigation.navigate('Fullscreen');
  };

  return (
    <View style={styles.page}>
      <Button title="打开全屏视频" onPress={goToFullscreen} />
    </View>
  );
}

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

全屏页面（FullscreenPage.js）

import { Button, View, StyleSheet } from 'react-native';
import { useNavigation } from '@react-navigation/native';

export default function FullscreenPage({ toggleVideoSize }) {
  const navigation = useNavigation();

  const goBack = () => {
    // 先恢复尺寸动画，再返回页面
    toggleVideoSize();
    navigation.goBack();
  };

  return (
    <View style={styles.page}>
      <Button title="返回缩略图" onPress={goBack} />
    </View>
  );
}

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.5)', // 半透明背景突出视频
  },
});

额外注意点 #

• 可以用React Context把视频的状态和方法封装起来，避免在组件间重复传递props，更适合复杂项目。
• 注意调整视频组件的zIndex或elevation（Android），确保它不会被页面内容遮挡。
• 如果需要传递视频源、播放进度等信息，也可以通过Context统一管理，保证页面切换时数据同步。

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