React Native 音视频播放器与弹幕系统开发实践

import React, { useEffect, useRef, useState } from 'react';
import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
import Video from 'react-native-video';
import Popup from './Popup'; // 假设Popup是一个导入自的弹幕组件
 
const VideoPlayer = ({ route }) => {
  const videoRef = useRef(null);
  const [isPopupVisible, setIsPopupVisible] = useState(false);
  const [popupData, setPopupData] = useState({});
 
  const onShowPopup = (time) => {
    setIsPopupVisible(true);
    setPopupData({ time }); // 设置弹幕数据
  };
 
  const onHidePopup = () => {
    setIsPopupVisible(false);
  };
 
  useEffect(() => {
    if (route.params && route.params.onShowPopup) {
      route.params.onShowPopup(onShowPopup);
    }
  }, []);
 
  return (
    <View style={styles.container}>
      <Video
        ref={videoRef}
        source={{ uri: route.params.videoUri }}
        style={styles.video}
        controls
      />
      <Popup
        isVisible={isPopupVisible}
        data={popupData}
        onClose={onHidePopup}
      />
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
  },
  video: {
    flex: 1,
  },
});
 
export default VideoPlayer;

这个代码示例展示了如何在React Native应用中集成视频播放器和弹幕系统。它使用了react-native-video库来处理视频播放，并定义了一个简单的Popup组件来显示弹幕信息。代码中使用了函数组件和Hooks API来管理组件状态，这是当前React Native推荐的做法。