两种跳转的情况
通过路由一层层跳转
从A-B-C-D, 最好从D-A (从第二个页面开始传递参数)
从A开始跳转到B,在B页面跳转至C页面的时候需要传递参数key
this.props.navigation.navigate('C', {key: this.props.navogation.state.key})
从C跳转到D页面
const {params} = this.props.navogation.getNavState()
this.props.navigation.navigate('D', {key: params.key})
从D返回到A页面
const {params} = this.props.navogation.getNavState()
const backAction = NavigationActions.back({
key: params.key,
});
this.props.navigation.dispatch(backAction)
在某个页面跳转到没有经历过路由的页面
import SkinTestRecord from './module/ageloc-me/SkinTestRecord';
import Agelocme from './module/ageloc-me/Agelocme';
const TabStack = TabNavigator(
{
Tab1: {
title: '首页',
login: true,
screen: HomePage,
navigationOptions: {
header: null,
tabBarLabel: '首页',
tabBarIcon: ({ focused, tintColor }) => (
renderTabImage(!focused ? IMG_HOME : IMG_HOME_SELECTED)
),
}
},
Tab2: {
title: '产品目录',
login: true,
screen: ProductSummary,
navigationOptions: {
header: null,
tabBarLabel: '产品目录',
tabBarIcon: ({ focused, tintColor }) => (
renderTabImage(!focused ? IMG_PM : IMG_PM_SELECTED)
),
}
},
Tab3: {
login: true,
screen: RoleTranslation,
navigationOptions: {
header: null,
tabBarIcon: ({ focused, tintColor }) => (
renderTabImage(!focused ? IMG_ADDNUSKIN : IMG_ADDNUSKIN_SELECTED)
),
}
},
Tab4: {
title: '个人中心',
login: true,
screen: MinePage,
navigationOptions: {
header: null,
tabBarLabel: '个人中心',
tabBarIcon: ({ focused, tintColor }) => (
renderTabImage(!focused ? IMG_MINE : IMG_MINE_SELECTED)
),
}
},
},
{
tabBarVisible: false,
tabBarPosition: 'bottom',
backBehavior: 'none',
swipeEnabled: false,
animationEnabled: false,
lazy: true,
tabBarOptions: {
showIcon: true,
scrollEnabled: false,
activeTintColor: Constant.colorPrimary,
inactiveTintColor: Constant.colorTxtDefault,
style: {
margin: 0,
backgroundColor: 'white',
paddingTop:ISIPHONEX ? 10 : 0,
height: ISIPHONEX ? 60 : 50,
},
tabStyle: {
borderTopColor: Constant.colorDivider,
margin: 0,
padding: 0,
},
indicatorStyle: {
height: 0
},
labelStyle: {
padding: 0,
margin: 0,
marginTop: 0,
fontSize: 12,
marginBottom: ISIPHONEX ? 10 : 6,
},
}
}
);
const AppRouterInfo = {
DefaultTab: {
title: '用户1',
screen: TabStack,
login: true,
},
Agelocme: {
title: 'Agelocme',
screen: Agelocme,
},
SkinTestRecord: {
title: '记录',
screen: SkinTestRecord
},
};
const AppStack = StackNavigator(
AppRouterInfo
, {
headerMode: 'none',
initialRouteName: !__DEV__ ? 'Splash' : 'Splash'
}
);
import { NavigationActions } from 'react-navigation';
const resetAction = NavigationActions.reset({
index: 1, // 注意不要越界
actions: [ // tabbar
NavigationActions.navigate({ routeName: 'DefaultTab',action:NavigationActions.navigate({
routeName: 'Tab4', // 这个是tabs 里面的任何一个tab
})}),
NavigationActions.navigate({ routeName: 'Agelocme'})
]
})
this.props.navigation.dispatch(resetAction)
多层,自定义
const resetAction = NavigationActions.reset({
index: 2, // 注意不要越界
actions: [
NavigationActions.navigate({ routeName: 'DefaultTab',action:NavigationActions.navigate({
routeName: 'Tab4',
})}),
NavigationActions.navigate({ routeName: 'Agelocme'}),
NavigationActions.navigate({ routeName: 'SkinTestRecord'}),
]
})
this.props.navigation.dispatch(resetAction)