React Native应用中能否像React一样在视频（含直播）上绘制Canvas？

一、在视频不同位置绘制内容（替代Web Canvas的方案） #

React Native没有Web环境中的<canvas>元素，但可以通过视图叠加+专用绘图库实现类似效果：

• 核心思路：将视频组件与绘图组件放在同一父容器内，通过绝对定位让绘图层覆盖在视频上方，实现“在视频上绘制”的视觉效果。
• 常用实现方式：
  • 使用react-native-skia：高性能2D绘图库，支持绘制路径、形状、文字等，通过SkiaCanvas组件创建绘图层，结合绝对定位覆盖在视频上，可实时更新绘制内容，适配直播场景的低延迟需求。
  • 使用react-native-svg：若仅需绘制矢量图形（如线条、图标），可将SVG组件叠加在视频层，通过修改SVG的props动态更新图形位置和样式。
  • 原生自定义视图：如果需要复杂的原生绘图逻辑，可封装Android的Canvas或iOS的CoreGraphics视图，通过React Native桥接暴露给JS层调用。

示例伪代码（react-native-skia + react-native-video）：

import { View, StyleSheet } from 'react-native';
import Video from 'react-native-video';
import { Canvas, Circle } from '@shopify/react-native-skia';

const VideoWithDrawing = () => {
  return (
    <View style={styles.container}>
      <Video
        source={{ uri: 'your-video-or-live-stream-url' }}
        style={styles.video}
        playInBackground={false}
      />
      {/* 叠加在视频上的绘图层 */}
      <Canvas style={styles.canvas}>
        {/* 在视频左上角绘制一个红色圆圈 */}
        <Circle cx={50} cy={50} r={20} color="red" />
      </Canvas>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    position: 'relative',
    width: '100%',
    aspectRatio: 16/9,
  },
  video: {
    width: '100%',
    height: '100%',
  },
  canvas: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
  },
});

二、类似React方式操作视频（含直播） #

React Native中可以通过封装好的视频组件实现类似Web React的操作逻辑，核心是通过props控制状态、ref调用实例方法：

• 常用视频组件：
  • react-native-video：适用于裸React Native项目，支持HLS、RTMP等主流流媒体协议，可处理直播和点播视频。
  • expo-av的Video组件：适用于Expo项目，API更简洁，同样支持直播流。
• 核心操作方式：
  • 状态控制：通过paused、volume、seek等props控制播放状态，和React中用state控制组件属性的逻辑一致。
  • 实例方法：通过useRef获取视频组件实例，调用playAsync()、pauseAsync()、seekAsync()等方法，类似Web中操作video元素的DOM API。
  • 事件监听：监听onLoad、onProgress、onBuffer等事件，实时获取视频加载、播放进度、缓冲状态，适配直播场景的状态反馈。

示例伪代码（expo-av）：

import { useState, useRef } from 'react';
import { View, Button } from 'react-native';
import { Video } from 'expo-av';

const VideoPlayer = () => {
  const [isPlaying, setIsPlaying] = useState(false);
  const videoRef = useRef(null);

  const togglePlay = async () => {
    if (isPlaying) {
      await videoRef.current.pauseAsync();
    } else {
      await videoRef.current.playAsync();
    }
    setIsPlaying(!isPlaying);
  };

  return (
    <View style={{ width: '100%', aspectRatio: 16/9 }}>
      <Video
        ref={videoRef}
        source={{ uri: 'your-live-stream-url' }}
        style={{ width: '100%', height: '100%' }}
        isLooping={false}
        onPlaybackStatusUpdate={(status) => setIsPlaying(status.isPlaying)}
      />
      <Button title={isPlaying ? '暂停' : '播放'} onPress={togglePlay} />
    </View>
  );
};

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