在模糊时销毁React Native组件

Question

我具有以下导航结构

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

我的问题是，每当我打开应用程序时，它都会触发didCompleteVideoPlayback并尝试执行与其他应用程序级别重定向（例如，单击推送通知时重定向或导航状态持久性等）冲突的重定向。>

如何确定AppSplashScreen没有对准焦点，它不能显示视频并且不触发didCompleteVideoPlayback

PS：componentWillUnmount不会从内存中销毁视频组件，我想确保

赞赏这里的任何指针。

谢谢。

我具有以下导航结构const AppNavigator = createStackNavigator（{AppSplashScreen：AppSplashScreen，LanguageScreen：LanguageScreen，WalkthroughScreen：WalkthroughScreen，...

Answer 1

似乎正在与导航侦听器一起使用，这是我所做的