React Native视频加字幕（内加外）

直接贴代码吧：

import React from 'react';
import {View, ScrollView} from 'react-native';
import axios from "axios"
import {Header} from "../common/ItemHeader";
import Video, {TextTrackType} from 'react-native-video';
import {width,height} from "../../util/functions";
import {Text} from "react-native-elements";


let textTracks = [
    {
        title: "English CC",
        language: "en",
        type: TextTrackType.VTT,
        uri: "https://wordcreed.app/zimu.vtt"
    }
]


class VideoContainer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: "",
            currentTime: 0,
        }
    }


    componentDidMount(): void {

        // 时间转换并计算
        CreateTime = (base) => {
            let ms = parseInt(base.split(".")[1])
            let time = base.split(".")[0].split(":")
            let h = parseInt(time[0])
            let min = parseInt(time[1])
            let s = parseInt(time[2])
            return min * 60 + s + ms / 1000
        }
        // 获取在线字幕并处理
        axios.get("https://wordcreed.app/zimu.vtt").then(res => {
            let lryAry = res.data.split(/[\r\n]/)
            lryAry.splice(0, 1)

            let Data = []
            lryAry.forEach((val, index) => {
                if (val === "") {
                    lryAry.splice(index, 1)
                }
            })
            for (let i = 0; i < lryAry.length; i++) {
                if (lryAry[i] === "") {
                    lryAry.splice(i, 1)
                }
                if (/^[0-9]+$/.test(lryAry[i])) {
                    lryAry.splice(i, 1)
                }
                // 处理本句开始与结束的时间
                let timeList = lryAry[i].indexOf('-->')
                if (timeList !== -1) {
                    let fist = lryAry[i].split("-->")[0]
                    let last = lryAry[i].split("-->")[1]

                    let item = {
                        FirstTime: CreateTime(fist),
                        LastTime: CreateTime(last),
                        en: lryAry[i + 1],
                        cn: lryAry[i + 2]
                    }
                    Data.push(item)

                }
            }

            Data.splice(Data.length-1, 1)
            this.setState({data: Data})
        })
    }


    CreateTheTxt = (data, currentTime) => {
        let Txt = []
        for (let i = 0; i < data.length; i++) {
            if (data[i].FirstTime< currentTime && data[i].LastTime > currentTime) {
                this._scrollView.scrollTo({x: 0, y: (50 * i), animated: true});
            }
            Txt.push(<View key={i} style={{width: width, height: 50, justifyContent: "center", alignItems: "center"}}>
                <Text
                    style={{color: data[i].FirstTime < currentTime && data[i].LastTime > currentTime ? "red" : null}}>{data[i].en}</Text>
                <Text
                    style={{color: data[i].FirstTime < currentTime && data[i].LastTime > currentTime ? "red" : null}}>{data[i].cn}</Text>
            </View>)

        }
        return Txt
    }


    render() {
        let {currentTime, data} = this.state
        return (
            <View style={{flex: 1}}>
                <Header navigation={this.props.navigation} context={"Video"}/>
                <Video
                    style={{
                        width: width - 10,
                        height: 200,
                        margin: 5,
                        marginBottom: 0
                    }}
                    source={require('../../img/video.mp4')}
                    controls={true}
                    paused={true}
                    onProgress={(data) => {
                        this.setState({currentTime: data.currentTime.toFixed(3)})
                    }}
                    textTracks={textTracks}
                    selectedTextTrack={{
                        type: "title",
                        value: "English CC"
                    }}
                />
                <ScrollView
                    style={{width: width, height: height-340}}
                    ref={(scrollView) => {
                        this._scrollView = scrollView
                    }}>
                    {this.state.data ? this.CreateTheTxt(data, Number(currentTime)) : null}
                </ScrollView>
            </View>
        )
    }
}

export default VideoContainer

效果图：

WX20190625-172743@2x.png