WdBly Blog

懂事、有趣、保持理智

WdBly Blog

懂事、有趣、保持理智

周维 | Jim

603927378@qq.com

react navigation 中使用goBack()跳转到指定页面

在react navigation中我们需要使用goBack返回到指定页面

goBack()接受一个Key参数用户返回指定页面。

例如: 现在路由栈中有 A -> B -> C -> D页面。

我们需要从 D页面返回到A页面, 需要调用goBack并且传入B页面的Key。

注意1: 需要到A页面,要传入A的下一个路由的Key,这里的Key的含义是从路由Key值为此Key的页面返回, 这里传入B页面的Key值代表从B页面返回,自然就返回到A页面了。

注意2: 这里所说的Kye值并不是我们所设置的routeName, 而是进入路由时动态分配的随机值,每次进入都不一样。

Key为空时,默认返回上个页面。

如何获取路由的Key?

通过配置处获取

// 在路由配置处获取 Order: { screen: Order, path: "/order/:orderId", navigationOptions: ({navigation}) => { NavigationService.setRouters(navigation.state, navigation); return null; } } // setRouters function setRouters(routers, navigation) { _routers[routers.routeName] = routers.key; if(routers.routes) { routers.routes.forEach(route => { _routers[route.routeName] = route.key; }); } _navigation = navigation; }

在页面设置navigationOptions

class Order extends React.Component { static navigationOptions = ({navigation}) => { NavigationService.setRouters(navigation.state, navigation); return null; } ... } // setRouters 相同

使用

// 从Order页面返回 navigationService.popToRouter("Order");