43d0df4e8fe6 ·

你好，对于goback指定routeName，以及stackNavigator防止重复跳转，我有不同的看法，还望指教，谢谢。

我不是很赞同修改源码来实现自己的功能，除非迫不得已，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)) {
//避免重复跳转
return state
}
}
return defaultGetStateForAction(action, state)
};
```

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

还望指教，谢谢。

羽纱 评论自react-navigation使用技巧

43d0df4e8fe6

React组件具有很强的灵活性和功能性。 在JS.COACH上有很多组件库可供使用，但随着时间的增长组件会变得非常臃肿。 与任何其他类型的编程一样，遵守单一原则不仅使您的组件...

43d0df4e8fe6

title: 翻译|React-navigation导航系统(2)date: 2017-03-28 07:48:36categories: 翻译tags: React-nat...