React native - Webview 视频在父状态更改时重新加载

Posted 2023-02-23

【中文标题】React native - Webview 视频在父状态更改时重新加载

【英文标题】：React native - Webview video reload itself on parent state change

【发布时间】：2017-08-29 12:57:59

【问题描述】：

我有以下结构：

class Parent extends Component  
    state =  isHeaderCollapsed : false 

    render()  
        <ScrollView decelerationRate="fast" stickyHeaderIndices=isHeaderCollapsed && [0] scrollEventThrottle=1 onScroll=(value) => this.setState(isHeaderCollpased: true) style=styles.body>
            <JobHeader collapsed=isHeaderCollapsed />
            <WebView allowsInlineMediaPlayback=true style=[styles.video, style] javascriptEnabled=true source=uri: mediaUrl />
       </ScrollView>
     

在 ios 上，每当我更改父组件的状态时，webview 中的 youtube 视频就会自行刷新。我不希望这种情况发生。 谢谢！

【参考方案1】：

您可以使用shouldComponentUpdate 来检查是否需要重新渲染：

class Parent extends Component  
    constructor()
        super();
        this.state = 
            isHeaderCollapsed : false
        
    

    shouldComponentUpdate(nextProps, nextState)
        return nextState.isHeaderCollapsed !== this.state.isHeaderCollapsed;
    

    render()  
        <ScrollView decelerationRate="fast" stickyHeaderIndices=isHeaderCollapsed && [0] scrollEventThrottle=1 onScroll=(value) => this.setState(isHeaderCollpased: true) style=styles.body>

                <JobHeader collapsed=isHeaderCollapsed />
                <WebView allowsInlineMediaPlayback=true style=[styles.video, style] javaScriptEnabled=true source=uri: mediaUrl />

       </ScrollView>
     

【讨论】：

谢谢@Andrew，已经试过了。我认为这个：stickyHeaderIndices=isHeaderCollapsed && [0] 方法会导致粘性标题使整个孩子再次重新渲染

尝试将 WebView 移动到自定义组件中。然后你可以在父更新时用 shouldComponentUpdate 阻止它重新渲染。