为什么启用全屏模式后暂停会重置？

Question

我正在尝试添加视频播放器，我正在使用 react-native-video-controls 在我的视频上添加控件，但重置暂停时出现问题

代码：

handleExitFullScreen = () => {
    this.setState({
        fullScreen : false
    });
}

handleEnterFullscreen = () => {
    this.setState({
        fullScreen : true
    });
}
<VideoPlayer
          source            = {{ uri: link }}
          disableVolume
          disableBack
          onEnterFullscreen = {this.handleEnterFullscreen}
          onExitFullscreen  = {this.handleExitFullScreen}
          toggleResizeModeOnFullscreen = {false}
/>

Answer 1

如果你看react-native-video-controls module，

    _toggleFullscreen() {
        let state = this.state;

        state.isFullscreen = ! state.isFullscreen;

        if (this.props.toggleResizeModeOnFullscreen) {
            state.resizeMode = state.isFullscreen === true ? 'cover' : 'contain';
        }

        if (state.isFullscreen) {
            typeof this.events.onEnterFullscreen === 'function' && this.events.onEnterFullscreen();
        }
        else {
            typeof this.events.onExitFullscreen === 'function' && this.events.onExitFullscreen();
        }

        this.setState( state );
    }

您可以看到它在更改屏幕状态时执行setSate。这意味着再次渲染。

这些实现包含在 react-native-dom、react-native 等渲染器中。

查看React.Component 中的setState implementation，一切都被委派作用于创建组件实例的渲染器。

// A bit simplified

setState(partialState, callback) {
    // Use the 'updater' field to talk back to the renderer!
    this.updater.enqueueSetState(this, partialState, callback);
};

这是this.setState() 在React 包中的定义方式，但这是DOM 的更新方式。 读取React DOM 设置的this.updater，允许ReactDOM 安排，并处理更新。