react-navigation是0.45版本新出的路由組件,功能強(qiáng)大.但是在使用過(guò)程中發(fā)現(xiàn)一個(gè)局限性,可以使用navigate('aaa'),通過(guò)routeName跳轉(zhuǎn)指定頁(yè)面,午飯實(shí)現(xiàn)goBack('aaa')方法返回到指定頁(yè)面.
和交流群里一些大神交流了一些看法,兔神選擇了修改goBack()方法的源碼的方式,實(shí)現(xiàn)跳轉(zhuǎn)指定頁(yè)面.兔神文章鏈接react-navigation使用技巧.該方法很好很強(qiáng)大,修改內(nèi)容很少,個(gè)人僅僅是出于多想一種解決方法的出發(fā)點(diǎn),嘗試另一種方法來(lái)解決.
所以我選擇了給react-navigation增加新方法goBackWithRouteName(routeName)的方式來(lái)實(shí)現(xiàn).下面介紹一下詳細(xì)的實(shí)現(xiàn)過(guò)程:
先來(lái)一張效果圖
首先找到項(xiàng)目中該目錄 /node_modules/react-navigation/src/
涉及4個(gè)文件:
1. /node_modules/react-navigation/src/addNavigationHelpers.js文件
2. /node_modules/react-navigation/src/addNavigationActions.js文件
3. /node_modules/react-navigation/src/typeDefinition.js文件
4. /node_modules/react-navigation/src/routers/StackRouter.js文件
修改內(nèi)容
1.addNavigationHelpers.js文件
第18行
goBack: (key?: ?string): boolean =>
navigation.dispatch(
NavigationActions.back({
key: key === undefined ? navigation.state.key : key,
})
),
/*新增代碼部分*/
goBackWithRouteName: (routeName?: ?string): boolean =>
navigation.dispatch(
NavigationActions.backWithRouteName({
routeName: routeName === undefined ? navigation.state.routeName : routeName,
})
),
2. addNavigationHelpers.js文件
第7行
const BACK = 'Navigation/BACK';
/*新增代碼部分*/
const BACK_WITH_ROUTE_RNAME = 'Navigation/BACK_WITH_ROUTE_RNAME';
第22行
const back = createAction(BACK);
/*新增代碼部分*/
const backWithRouteName = createAction(BACK_WITH_ROUTE_RNAME);
第32行
Back: BACK,
/*新增代碼部分*/
BackWithRouteName: BACK_WITH_ROUTE_RNAME,
第68行
BACK,
/*新增代碼部分*/
BACK_WITH_ROUTE_RNAME,
第78行
back,
/*新增代碼部分*/
backWithRouteName,
3.typeDefinition.js文件
第184行
export type NavigationBackAction = {
type: 'Navigation/BACK',
key?: ?string,
};
? /*新增代碼部分*/
export type NavigationBackWithRouteNameAction = {
type: 'Navigation/BACK_WITH_ROUTE_RNAME',
routeName: string,
key?: ?string,
};
4.StackRouter.js文件
if (action.type === NavigationActions.BACK) {
let backRouteIndex = null;
if (action.key) {
const backRoute = state.routes.find(
/* $FlowFixMe */
(route: *) => route.key === action.key
);
/* $FlowFixMe */
backRouteIndex = state.routes.indexOf(backRoute);
}
if (backRouteIndex == null) {
return StateUtils.pop(state);
}
if (backRouteIndex > 0) {
return {
...state,
routes: state.routes.slice(0, backRouteIndex),
index: backRouteIndex - 1,
};
}
}
/*新增代碼部分*/
if (action.type === NavigationActions.BACK_WITH_ROUTER_RNAME) {
let backRouteIndex = null;
if (action.routeName) {
const backRoute = state.routes.find(
/* $FlowFixMe */
(route: *) => route.routeName === action.routeName
);
/* $FlowFixMe */
backRouteIndex = state.routes.indexOf(backRoute);
}
if (backRouteIndex == null) {
return StateUtils.pop(state);
}
if (backRouteIndex >= 0) {
return {
...state,
routes: state.routes.slice(0, backRouteIndex + 1),
index: backRouteIndex - 1 + 1,
};
}
}
以上四個(gè)文件內(nèi)容修改完畢后保存即可.goBackWithRouteName(routeName)使用方法類似goBack().
對(duì)比兔神的實(shí)現(xiàn)方法,這個(gè)方法同樣實(shí)現(xiàn)了根據(jù)routeName回跳到指定頁(yè)面的功能,但是修改步驟較復(fù)雜,優(yōu)點(diǎn)是大家可以參照此方法實(shí)現(xiàn)過(guò)程,自定義自己需要的其他方法.提高大家對(duì)于react-navigation的擴(kuò)展能力.
