4

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

我的代码如下。

// 播放器

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。新 url 显示在控制台中，但不会添加到播放器中。仅播放第一个视频并且播放器停止。如何将下一个 url 设置为视频源？甚至，我已经设置了它，它不起作用。

我怎样才能做到这一点？

4

0 回答 0