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

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的更新方式。 阅读this.updater设置的React DOM，允许ReactDOM安排时间表，并处理更新。