React-Native-Danmaku-Player
前言
一直以来,React Native 平台都没有什么好用的弹幕组件,要不早就停止更新,要不无法使用,而英文网络也没有使用弹幕的习惯,于是便撰写了这个组件
使用方法
-
使用 npm:
npm i react-native-danmaku-player
-
使用 yarn:
yarn add react-native-danmaku-player
Props
interface DanmakuItemRawData {
content: string
color: string
timestamp: number
id: number
}
interface DanmakuPlayerProps {
width: number
height: number
period: number
duration: number
judge?: number
ahead?: number
style?: StyleProp<ViewStyle>
fontSize: number
lineHeight: number
textShadowColor?: string
textShadowRadius?: number
paused: boolean
currentTime: number
getDanmakuMethod: (startTimeStamp: number, endTimeStamp: number) => Promise<DanmakuItemRawData[]>
}
组件中所有的时间单位都是毫秒 ms
-
width
必需,弹幕区域的宽度
-
height
必需,弹幕区域的高度
-
period
必需,弹幕的周期,单位毫秒。可以这么理解:如果设置成 10000,那么视频刚开播放时就会请求 0ms - 10000ms 之间的弹幕,并把这些弹幕渲染出来,向左移动,接着是 10000ms - 20000ms,依次类推。设置的数字较小的话,请求网络会比较频繁。
-
duration
必需,弹幕的从出现到消失的间隔,单位毫秒
-
judge
默认值 1000,单位毫秒。用于判断视频时间是否发生了激变,也就是用户是否操作了视频的进度条。此时因为时间线发生了变化,屏幕上的弹幕将会被清除,重新渲染当前时间进度的弹幕
-
ahead
默认值 1。我们不可能在一个周期到来时,再去请求这个周期的弹幕,必须提前请求弹幕,渲染时可以直接使用数据。
ahead
代表提前几个周期就请求当前周期的弹幕 -
style
相当于
React Native
中View
组件的style
属性 -
fontSize
必需,弹幕的字体大小
-
lineHeight
必需,弹幕的行高,建议设置为弹幕字体的 1.5 倍或者 2 倍
-
textShadowColor
弹幕描边颜色,默认无
-
textShadowRadius
弹幕描边半径,默认无
-
getDanmakuMethod
必需,用于获取弹幕数据的异步函数。将会传入两个参数,弹幕周期的起始的时间点和结束的时间点,必须返回弹幕原始数据数组
DanmakuItemRawData[]
-
paused
必需,弹幕是否暂停播放
-
currentTime
必需,当前的时间点,单位毫秒
用法
必须搭配 react-native-video
使用,建议使用 6.0.0-alpha.1 以上版本
截止目前为止,react-native-video
的最新稳定版本仍然是 5.2.0,如果在安装时已经在 6.0 以上版本,请自行去除安装命令末尾的 @next
yarn add react-native-video@next
如果你的项目使用 TypeScript
,react-native-video
并没有自带类型声明,请手动安装类型声明。如果你使用的是 JavaScript
,请忽视。
yarn add @types/react-native-video -D
注意:react-native-video
中的时间单位均是秒,本插件使用的时间单位均是毫秒,因为毫秒是标准单位,请注意两者之间的换算!
项目使用 Demo:
import React, { useState } from "react"
import { View, Text, Image, Pressable, useWindowDimensions } from "react-native"
import DanmakuPlayer from "react-native-danmaku-player"
import Video from "react-native-video"
export default function App() {
const { width, height } = useWindowDimensions()
// 控制视频和弹幕一起播放和暂停
const [paused, setPaused] = useState(false)
// 当前的时间点,单位毫秒
const [currentTime, setCurrentTime] = useState(0)
// 传递给 Video 组件的 onProgress 回调函数
const videoProcess = (onProgressData: OnProgressData) => {
// 注意此处的单位换算
setCurrentTime(onProgressData.currentTime * 1000)
}
return (
<View style={{ width, height }}>
<Video
paused={paused}
source={{ uri: "your video source" }}
style={{ width, height, backgroundColor: "black" }}
onProgress={videoProcess}
/>
<DanmakuPlayer
width={width}
height={height}
period={10000}
duration={15000}
fontSize={18}
lineHeight={24}
paused={paused}
currentTime={currentTime}
style={{ position: "absolute", left: 0, top: 0 }}
// 在此传入你的异步函数,每个周期都会调用
getDanmakuMethod={urMethod}
/>
</View>
)
}