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

Question

我有以下结构:

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 视频就会自行刷新。我不希望这种情况发生。
谢谢 !

Answer 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>
     }