美文网首页RN资料架
使用React-Navigation,安卓机退出app后再重启显

使用React-Navigation,安卓机退出app后再重启显

作者: boyrt | 来源:发表于2018-03-23 21:17 被阅读191次

    案例:启动apk,进入首界面A,A->B(A界面从路由中删除),物理键返回,退出B界面并返回桌面。通过icon启动程序,显示的界面B。
    我们期望的是重启应用后,显示的是界面A。

    目前想到的解决方案有三种。


    方案一:

    先跳转到指定页面,在执行BackHandler.exitApp();
    使用的路由是react-native-router-flux

    const router = (...props) => (
        <Router createReducer={reducerCreate}
                getSceneStyle={getSceneStyle}
                backAndroidHandler={() => {
                    if(Actions.state.routes[0].index>0){
                        Actions.pop()
                        return true;
                    }
                    //弹框提示是否退出程序
                    Alert.alert('温馨提示:', '确定退出应用吗?', [ { text : '取消' }, {
                        text : '确定', onPress : () => {
                            Actions.reset('welcome');
                            BackHandler.exitApp();
                        }
                    } ])
                    return true;
                }}
        >
        ...
    </Router>
    

    缺点
    退出之前,都会先跳转到指定页,再退出app。


    方案二

    redux和react-navigation一体化情况下,通过发送指定action,设置state。

    componentDidMount() {
            BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
        }
        componentWillUnmount() {
            BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
        }
    
        onBackPress = ()=>{
            const { dispatch, nav } = this.props;
            if (nav.index === 0) {
                if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {
                    dispatch({type:'ExitApp'})//将state设置成第一次启动一致,避免从哪个界面退出,启动时显示哪个界面的bug(杀掉进程启动无该问题)
                    return false
                }
                ToastAndroid.show('再按一次退出!', 1000);
                this.lastBackPressed = Date.now();
                return true;
            }
            dispatch(NavigationActions.back());
            return true;
        }
    

    对应的reducer处理

    function nav(state=initiaNavState,action){
        let nextState;
        switch (action.type){
            ...
            case 'ExitApp':
                nextState = initiaNavState;
                break;
            default:
                nextState = AppNavigator.router.getStateForAction(action, state);
                break;
        }
        // Simply return the original `state` if `nextState` is null or undefined.
        return nextState || state;
    

    将state设置成第一次启动一致,避免从哪个界面退出,启动时显示哪个界面的bug。
    缺点
    必须通过react-navigation和redux一体化实现。


    方案三

    通过原生代码finish当前activity,并调用System.exit(0)

        /**
         * 关闭启动屏
         */
        @ReactMethod
        public void exit() {
            if (getCurrentActivity() != null)
                getCurrentActivity().finish();
            System.exit(0);
        }
    

    具体使用可前往React Native 启动白屏问题(Android),SplashScreenModule.java类中,有个exit()方法,当我们react-native重写android物理键退出程序的时候,调用该方法,即可解决如题所示的问题。

    相关文章

      网友评论

      • IT人故事会:做开发很累,还的学习,之前你这个我也碰到过,但是没记录谢谢了
        boyrt:@半城烟沙_930f 不是空数组。一般是通过 const initialState = AppNavigator.router.getStateForAction(AppNavigator.router.getActionForPathAndParams('Login'))设置,其中Login就是你AppNavigator中设置的第一个路由页面;
        半城烟沙_930f:我想知道第二种方法,initstate怎么配置的,是不是直接一个空数组啊
        boyrt:是的,要学的太多了,想要成记录的习惯,怕回头又忘记了

      本文标题:使用React-Navigation,安卓机退出app后再重启显

      本文链接:https://www.haomeiwen.com/subject/apmxcftx.html