Closed
Description
after readed , if you have a best idear?
my case is login=>tabbar=>tab1=>login , there is something i want to do
- when hardwareBackPress pressed don't pop to login route, only allow logout
<Button>
do it. - when logout
<Button>
pressed , i useActions.login
so it's ok and with animation, but theroot
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
Labels
No labels