React native 在Blur上销毁React本机组件

我有以下导航结构

const AppNavigator = createStackNavigator({
    AppSplashScreen: AppSplashScreen,
    WalkthroughScreen: WalkthroughScreen,
    LoginScreen: LoginScreen,
    BottomTabNavigator: BottomTabNavigator
}, {
    headerMode: 'none',
    cardStyle: { backgroundColor: '#000000' },
});

这是我的第一个屏幕。我正在使用视频来显示闪屏动画

export default class AppSplashScreen extends Component {

    state = {
        displayVideoPlayer: true,
        firstLaunch: false
    }

    componentDidMount() {
        SplashScreen.hide();
    }

    componentWillUnmount() {
        this.setState({
            displayVideoPlayer: false
        });
    }

    isFirstLaunch() {
        let firstLaunch = true;
        if (true === storage.get('APP_ALREADY_LAUNCHED')) {
            firstLaunch = false;
        } else {
            storage.set('APP_ALREADY_LAUNCHED', true);
            firstLaunch = true;
        }
        return firstLaunch;
    }

    didCompleteVideoPlayback() {
        if (true === this.state.displayVideoPlayer) {
            this.setState({
                displayVideoPlayer: false
            });
        }
        const currentRouteName = this.props.navigation.state.routeName;
        if ('AppSplashScreen' !== currentRouteName) {
            return false;
        }
        if (true === global.SKIP_SPLASH_SCREEN_REDIRECT) {
            return false;
        }
        if (this.isFirstLaunch()) {
            this.props.navigation.navigate('LanguageScreen');
            return false;
        }
        this.props.navigation.navigate('HomeScreen');
    }

    render() {
        return (
            <View style={{flex: 1, backgroundColor: '#000000', alignItems: 'center', justifyContent: 'center'}}>
                {true === this.state.displayVideoPlayer &&
                    <Video
                        source={VIDEO_SPLASH_2}
                        muted={true}
                        repeat={false}
                        playInBackground={false}
                        resizeMode="contain"
                        onEnd={() => this.didCompleteVideoPlayback()}
                        style={{height: '100%', width: '100%', backgroundColor: '#000000'}}
                    />
                }
            </View>
        );
    }
}

导出默认类AppSplashScreen扩展组件{
状态={
没错，
首次发布：错误
}
componentDidMount（）{
SplashScreen.hide（）；
}
组件将卸载（）{
这是我的国家({
displayVideoPlayer:错误
});
}
isFirstLaunch（）{
让firstLaunch=true；
if（true==storage.get（'APP\u已启动'））{
firstLaunch=false；
}否则{
storage.set（'应用程序已启动'，true）；
firstLaunch=true；
}
返回第一次发射；
}
didCompleteVideoPlayback（）{
if（true==this.state.displayVideoPlayer）{
这是我的国家({
displayVideoPlayer:错误
});
}
const currentRouteName=this.props.navigation.state.routeName；
如果（'AppSplashScreen'！==currentRouteName）{
返回false；
}
if（true==全局跳过\u启动\u屏幕\u重定向）{
返回false；
}
if（this.isFirstLaunch（））{
this.props.navigation.navigate（'LanguageScreen'）；
返回false；
}
this.props.navigation.navigate（“主屏幕”）；
}
render（）{
返回(
{true===this.state.displayVideoPlayer&&
this.didCompleteVideoPlayback（）}
样式={{高度：“100%”，宽度：“100%”，背景色：'#000000'}
/>
}
);
}
}

我的问题是，每当我打开应用程序时，它就会触发

didpleteVideoPlayback

，并尝试执行与其他应用程序级重定向冲突的重定向，例如，点击推送通知时重定向，或导航状态持久化等

如何确保如果

AppSplashScreen

未对焦，它不能显示视频，也不能触发

didCompleteVideoPlayback

PS:

componentWillUnmount

没有从内存中销毁视频组件，我想确保 任何在这里的指针都是感激的

---

谢谢。

它似乎与导航侦听器一起工作，以下是我所做的

componentDidMount() {
    SplashScreen.hide();
    this.focusListener = this.props.navigation.addListener('didFocus', () => {
        this.setState({
            isFocussed: true
        })
    });
    this.blurListener = this.props.navigation.addListener('didBlur', () => {
        this.setState({
            isFocussed: false
        })
    });
    setTimeout(() => {
        this.unsubscribeListeners();
    }, 100);
}

render() {
    return (
        <View style={{flex: 1, backgroundColor: '#000000', alignItems: 'center', justifyContent: 'center'}}>
            {true === this.state.isFocussed &&
                <Video
                    source={VIDEO_SPLASH_2}
                    muted={true}
                    repeat={false}
                    playInBackground={false}
                    resizeMode="contain"
                    onEnd={() => this.didCompleteVideoPlayback()}
                    style={{height: '100%', width: '100%', backgroundColor: '#000000'}}
                />
            }
        </View>
    );
}

componentDidMount（）{
SplashScreen.hide（）；
this.focusListener=this.props.navigation.addListener（'didFocus'，（）=>{
这是我的国家({
IsFocused:正确
})
});
this.blurListener=this.props.navigation.addListener（'didBlur'，（）=>{
这是我的国家({
聚焦：假
})
});
设置超时（（）=>{
这是。取消订阅侦听器（）；
}, 100);
}
render（）{
返回(
{true===this.state.isFocused&&
this.didCompleteVideoPlayback（）}
样式={{高度：“100%”，宽度：“100%”，背景色：'#000000'}
/>
}
);
}

我不确定这是处理这些事情的好方法还是有更好的方法