diff --git a/ExRouter.js b/ExRouter.js index 8a34a0c30..c78da9533 100644 --- a/ExRouter.js +++ b/ExRouter.js @@ -186,11 +186,12 @@ export default class ExRouter extends React.Component { this.onReplace = this.onReplace.bind(this); this.onJump = this.onJump.bind(this); this.onActionSheet = this.onActionSheet.bind(this); + this.onTransitionToTop = this.onTransitionToTop.bind(this); this.state = {}; } componentWillUnmount() { - if (this === Actions.currentRouter.delegate) { + if (Actions.currentRouter && this === Actions.currentRouter.delegate) { Actions.currentRouter = null; } } @@ -267,6 +268,31 @@ export default class ExRouter extends React.Component { return true; } + onTransitionToTop(route:Route, props:{ [key: string]: any}) { + if (this.props.onTransitionToTop) { + const res = this.props.onTransitionToTop(route, props); + if (!res) { + return false; + } + } + const navigator = this.refs.nav; + let router:BaseRouter = route.parent; + + // reset router stack + router._stack = [route.name]; + + // you can use navigator.transitionToTop or navigator.immediatelyResetRouteStack + navigator.push + // navigator.immediatelyResetRouteStack + navigator.push is more beter , + // if target route's parent(router) stack only have one route eg ['someroute'] + + //navigator.transitionToTop(new ExRouteAdapter(route, props)); + + navigator.immediatelyResetRouteStack([]); + navigator.push(new ExRouteAdapter(route, props)); + + return true; + } + onModal(route: Route, props:{ [key: string]: any}):boolean { let element = React.createElement(route.component, Object.assign({}, route.props, props)); this.setState({modal: element}); diff --git a/README.md b/README.md index 765418f48..e969cddac 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,7 @@ npm i react-native-router-flux --save |-----------|--------|---------|--------------------------------------------| | name | string | required | Will be used to call screen transition, for example, `Actions.name(params)`. Must be unique. | | component | React.Component | semi-required | The `Component` to be displayed. Not required when defining a nested `Router` or child, see example | -| type | string | optional | Defines how the new screen is added to the navigator stack. One of `push`, `modal`,`actionSheet`,`replace`, `switch`, `reset`. Default is 'push'. `replace` tells navigator to replace current route with new route. `actionSheet` shows Action Sheet popup, you must pass callback as callback function, check Example for details. `modal` type inserts its 'component' after navigator component. It could be used for popup alerts as well for various needed processes before any navigator transitions (like login auth process).``switch` is used for tab screens. `reset` is similar to replace except it unmounts the componets in the navigator stack. `modal` component could be dismissed by using Actions.dismiss() | +| type | string | optional | Defines how the new screen is added to the navigator stack. One of `push`, `modal`,`actionSheet`,`replace`, `switch`, `reset` `transitionToTop`. Default is 'push'. `replace` tells navigator to replace current route with new route. `actionSheet` shows Action Sheet popup, you must pass callback as callback function, check Example for details. `modal` type inserts its 'component' after navigator component. It could be used for popup alerts as well for various needed processes before any navigator transitions (like login auth process).``switch` is used for tab screens. `reset` is similar to replace except it unmounts the componets in the navigator stack. `modal` component could be dismissed by using Actions.dismiss() `transitionToTop` will reset router stack ['route.name'] and with animation, if route has `sceneConfig`. eg `` | | initial | bool | false | Set to `true` if this is the initial screen | | title | string | null | The title to be displayed in the navigation bar | | schema | string | optional | Set this property to the name of a previously defined `Schema` to inherit its properties |