43d0df4e8fe6 ·

你好玛界，對于goback指定routeName，以及stackNavigator防止重復跳轉(zhuǎn)士嚎，我有不同的看法米奸，還望指教，謝謝灌旧。

我不是很贊同修改源碼來實現(xiàn)自己的功能绑咱，除非迫不得已，react-navigation官方提供了對路由攔截的方法节榜，在https://reactnavigation.org/docs/routers/#Customizing-Routers中有描述羡玛。
因此我覺得通過攔截來自定義路由行為是可行的。
指定routeName來goBack和防止重復navigate的代碼如下：
```
function routeIsInCurrentState(state: Object, routeName: string) {
if(state && state.routeName === routeName) {
return true
}

if(state && state.routes) {
return routeIsInCurrentState(state.routes[state.index], routeName)
}

return false
}

const defaultGetStateForAction = MyApp.router.getStateForAction;
MyApp.router.getStateForAction = (action, state) => {
if (state && action.type === NavigationActions.Back && action.routeName) {
//這里可以自己在外部自定義一個ActionType宗苍，然后判斷是否是自定義的ActionType
const backRoute = state.routes.find((route: *) => route.routeName === action.routeName);
if (backRoute) {
const backRouteIndex = state.routes.indexOf(backRoute);
const route = {
...state,
routes: state.routes.slice(0, backRouteIndex + 1),
index: backRouteIndex,
};
return route
}
}
if (state && action.type === NavigationActions.Navigate) {
if(routeIsInCurrentState(state, action.routeName)) {
//避免重復跳轉(zhuǎn)
return state
}
}
return defaultGetStateForAction(action, state)
};
```

如果react-navigation配合redux使用稼稿，那么在reducer里面就可以直接攔截action，做如上自定義操作了讳窟。

還望指教让歼，謝謝。

羽紗 評論自react-navigation使用技巧

43d0df4e8fe6

React組件具有很強的靈活性和功能性改执。 在JS.COACH上有很多組件庫可供使用啸蜜，但隨著時間的增長組件會變得非常臃腫。 與任何其他類型的編程一樣辈挂，遵守單一原則不僅使您的組件...

43d0df4e8fe6

title: 翻譯|React-navigation導航系統(tǒng)(2)date: 2017-03-28 07:48:36categories: 翻譯tags: React-nat...