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

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

1 个答案: