Skip to content

ExRouter Add onTransitionToTop method, have a best idear? #279

Closed
@virtoolswebplayer

Description

@virtoolswebplayer

after readed , if you have a best idear?

my case is login=>tabbar=>tab1=>login , there is something i want to do

  1. when hardwareBackPress pressed don't pop to login route, only allow logout <Button>do it.
  2. when logout <Button> pressed , i use Actions.login so it's ok and with animation, but the root Router stack like this [launch, login, tabbar, tab1Router, login], i want root Router stack is ['login'] and should with animation.

how to do root stack[launch, login, tabbar, tab1Router, login] => [login] and with transform animation

two choice

choice 1: set login Route's type = 'reset' , but there no transform animation it look like 'replace'

<Route name="login" component={Login}  hideNavBar={true} type="reset" backable={false}/>

choice 2: try use ExNavigator' method transitionToTop, so i add some code to ExRouter.js

<Route name="login" component={Login}  hideNavBar={true} type="transitionToTop" backable={false}/>
/**
  old code is blow
  componentWillUnmount() {
      if (this === Actions.currentRouter.delegate) {
        Actions.currentRouter = null;
      }
  }
*/

  componentWillUnmount() {
      if (Actions.currentRouter && this === Actions.currentRouter.delegate) {
        Actions.currentRouter = null;
      }
  }

/**
  add a new method for ExRouter Class
*/
  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;
    router._stack=[route.name];
    // you can use navigator.transitionToTop or  navigator.immediatelyResetRouteStack + navigator.push
    // navigator.immediatelyResetRouteStack + navigator.push is more beter , 
    // if root stack only have one route  eg ['someroute']
    // navigator.transitionToTop(new ExRouteAdapter(route, props));
    //  i use navigator.immediatelyResetRouteStack + navigator.push
    navigator.immediatelyResetRouteStack([]);
    navigator.push(new ExRouteAdapter(route, props));
    return true;
  }

My Router Setting

  render() {
    /*
     android点击返回,回退到上一个路由
     */
    BackAndroid.addEventListener('hardwareBackPress', () => {
      /**
       * check props.backable 
       * <Route  backable={false}/>
       */
        if ( typeof Actions.currentRouter.currentRoute.props.backable !== 'undefined') {
          return true;
        }

        try {
          Actions.pop();
          return true;
        }
        catch (err) {
          return true;
        }

        return true;
      }
    );
return(
<Router name="root"
                navigationBarStyle={styles.navBarStyle} //Nav Bar Container
                barButtonTextStyle={{color: "#FFF"}} //Text on button e.g. Back

          //barButtonIconStyle={{width: 100, borderWidth: 1}}
                titleStyle={styles.navTextStyle} // 标题样式
                barButtonIconStyle={styles.barButtonIconStyle} // E.g. Back button icon
                leftButtonStyle={{backgroundColor: 'white', paddingRight: 0,}}
                renderRightButton={renderRightButton}
        >
          <Schema name="modal" sceneConfig={Navigator.SceneConfigs.FloatFromBottom}/>
          <Schema name="default" sceneConfig={Navigator.SceneConfigs.FloatFromRight}/>
          <Schema name="withoutAnimation"/>
          <Schema name="tab" type="switch" icon={TabBarItem} sceneConfig={ Navigator.SceneConfigs.FloatFromRight}/>
          <Schema name="level2" hideNavBar={false} sceneConfig={Navigator.SceneConfigs.FloatFromRight}/>


          <Route name="login" component={Login}  hideNavBar={true} type="transitionToTop" backable={false}/>
          <Route name="register" component={Register} title="用户注册" hideNavBar={false}/>
          <Route name="forget" component={Register} title="找回密码" hideNavBar={false}/>
          <Route name="register2" component={Register} title="Register2" schema="withoutAnimation" hideNavBar={false}/>

          <Route name="showActionSheet" type="actionSheet" title="What do you want to do?"
                 options={['删除', '保存', '取消']} cancelButtonIndex={2} destructiveButtonIndex={0}/>
          <Route name="codepush" component={CodePushTest} title="CodePush"/>
          <Route name="error" type="modal" component={Error}/>
          <Route name="modalBox" type="modal" component={ReactNativeModalBox}/>

          <Route name="tab1_1" schema="level2" component={TabView} title="行业快讯"/>
          <Route name="tab1_2" schema="level2" component={TabView} title="排行榜"/>
          <Route name="tab1_3" schema="level2" component={TabView} title="我的业绩"/>
          <Route name="tab1_4" schema="level2" component={TabView} title="财富消息"/>
          <Route name="tab1_5" schema="level2" component={TabView} title="信息反馈"/>
          <Route name="tab1_6" schema="level2" component={TabView} title="个人信息"/>


          <Route name="tabbar"
            //type="reset" // 重置路由堆 此处如果设置type 为 reset 或 replace的时候,在选项卡逆向切换时会出现白屏的情况
                 hideNavBar={true} //hideNavBar 必须设置为 true 否则 子路由的标题将不可见
                 showNavigationBar={false} // showNavigationBar设置为 false ,切换选项卡时不显示后退导航
                 tabBarStyle={styles.getTabBarStyle(this.props)} sceneStyle={styles.sceneStyle}
                 sceneConfig={Navigator.SceneConfigs.FloatFromRight}
                 backable={false}
          >
            <Router footer={TabBar}>
              <Route name="tab1" schema="tab" title="首页" component={TabView} backable={false}/>
              <Route name="tab2" schema="tab" title="客户" component={TabView} hideNavBar={false} backable={false}/>
              <Route name="tab3" schema="tab" title="培训" component={TabView} backable={false}/>
              <Route name="tab4" schema="tab" title="推广" component={TabView} backable={false}/>
            </Router>
          </Route>

          <Route name="launch" component={Launch}
                 wrapRouter={false}
                 initial={true}
            //type='reset' // 使用reset 而不用 replace可以避免很多问题
                 hideNavBar={false}
                 title="初始页面"/>
        </Router>
);
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions