Question

在我的应用程序中，我想在单击下一步按钮时更改react-native-player来源的网址。

我的代码如下。

//播放器

render() {
        let { paused } = this.state;
        let { volume } = this.props; 

        return (
            <View key={this.state.key}>
                <TouchableOpacity onPress={() => this.playOrPauseVideo()}>

                    <Video
                        ref={videoPlayer => this.videoPlayer = videoPlayer}
                        source={this.props.source}
                        // onEnd={() => this.onVideoEnd()}
                        // onLoad={() => this.onVideoLoad(this)}
                        // onProgress={() => this.onProgress(this)}
                        playInBackground={false}
                        paused={paused}
                        volume={Math.max(Math.min(1, volume), 0)}

                        style={styles.backgroundVideo}
                    />

                </TouchableOpacity>
            </View>
        );
    }

//运动组件

const currentMovement = props => { 

    renderVideo = () => {
        if (props.movementVideo && typeof props.movementVideo !== undefined) {
            return ( 
                <View style={styles.movementVideoWrapper}>
                    <HorizontalVideoPlayer source={{ uri: props.movementVideo }} /> 
                </View>
            );
        } else { 
            return <View/>
        }
    }

    return (
        <View>
            <View style={styles.headerTextWrapper}>
                <HeadingText 
                    style={styles.headerText}
                    fontSize={22} 
                    textAlign="center"
                >
                    {props.movementName}
                </HeadingText>
            </View> 

            {this.renderVideo()}

            <View style={styles.repsTextWrapper}>
                <HeadingText 
                    style={styles.repsText}
                    fontSize={26} 
                    textAlign="center"
                >
                    {props.reps} REPS
                </HeadingText>
            </View> 
        </View>
    );
}

//屏幕

     let { firstCircuitMovement, workoutCompleted } = this.state;
            let { trainingProgress } = this.props;

            return (
                <View style={styles.container}>

                    <View style={styles.movementContainer}>
                        <CurrentMovement  
                            movementName={trainingProgress.currentMovementName}
                            movementVideo={trainingProgress.currentMovementVideo}
                            reps={trainingProgress.currentMovementReps}
                        />
                    </View>
      </View>
}

当我们单击下一步按钮时，trainingProgress将使用新的URL更新。新网址显示在控制台中，但不会添加到播放器中。仅播放第一个视频，播放器停止播放。如何为视频源设置下一个网址？甚至我已经设置好了，也行不通。

我该如何实现？

React-Native-Video句柄URL更改

0 个答案: