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

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 之类的渲染器中。

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

// 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计划并处理更新。