react-native

关于react-native中的navigation重置路由和安

2019-07-15  本文已影响0人  小悟空大仙人

在开发rn中经常会遇到路由返回时需要重置上一页的状态,也就是清除上一页的路由缓存,这样当你返回上一页的时候,页面就会重新执行componentDidMount等生命周期,直接上代码:


import { StackActions, NavigationActions } from 'react-navigation';

//StackActions对象包含了生成特定actions的方法,即基于栈导航器的actions。这些方法扩展了NavigationActions。这里使用 reast 方法:用一个新的状态替换当前状态

//reast 接收一个对象作为参数,这个对象有三个属性

//index - number - 必需- 当前路由在props.navigation.state路由数组中的索引.

//actions - array - 必需 - 上面提到的,要替换导航状态的actions数组.

//key - string or null - 可选- 如果设置,key所指定的导航器将会重置,如果是null,根导航器会重置.

const resetAction = StackActions.reset({

            index: 0,

            actions: [

              NavigationActions.navigate({ routeName: 'xxxxx' }),

            ],

          });

        this.props.navigation.dispatch(resetAction);

这就是跳转重置了路由,同时也可以通过设置actions选项也设置路由的跳转动作

解决完函数跳转后,安卓的物理返回键同样处理也可以重置跳转路由,上代码:


import { BackHandler } from 'react-native';

//首先要监听当前组件的安卓物理返回键

componentDidMount() {

        BackHandler.addEventListener("hardwareBackPress", this._goback);

}

componentWillUnmount() {

        BackHandler.removeEventListener("hardwareBackPress", this._goback);

}

//不要忘记_goback的this指向

_goback(){

        console.log('我监听了物理返回键',this.props)

        const resetAction = StackActions.reset({

            index: 0,

            actions: [

              NavigationActions.navigate({ routeName: 'xxxx' }),

            ],

          });

        this.props.navigation.dispatch(resetAction);

    }

上一篇下一篇

猜你喜欢

热点阅读