1. react-navigation7种常见导航
- createStackNavigator 普通的Navigator,屏幕上方导航
- createTabNavigator:createBottomTabNavigator和 createMaterialTopTabNavigator
- createBottomTabNavigator:屏幕下方标签栏
- createMaterialTopTabNavigator:屏幕上方标签栏
- createDrawerNavigator:抽屉效果导航,android左侧划入menu
- createSwitchNavigator:一次只显示一个页面
2.导航器所支持的Props
const SomeNav = createStackNavigator/createBottomTabNavigator({
//config
})
<SomeNav
screenProps={xxx}
ref={nav => {navigation = nav;}}
onNavigationStateChange(prevState,newState,action) =>{
}
/>
- ref:可以通过
ref
属性来获取navigation
; -
onNavigationStateChange(prevState,newState,action)
:每次当导航器的管理的state
发生变化时,都会回调该方法;prevState
表示变化之前的state;newState
表示新的state;action
表示导致变化的action; -
screenProps
:向子屏幕传递额外的数据,子屏幕可以通过this.props.screenProps获取到该数据
3.navigation包含的功能
- navigate:跳转到其他页面
- state:屏幕当前的state
- setParams:改变路由的params;
- goBack:关闭当前屏幕;
- dispatch:向路由发送一个action
- addListener: 订阅导航生命周期的更新
- isFocused:true标识屏幕获取了焦点
- getParam:获取具有回退的特定参数
如果一个navigation
没有navigate
,setParams
以及goBack
,可以使用navigation
去dispatch
一个action
去跳转新页面
const {navigation,theme,selectedTab} = this.props;
const resetAction = StackActions.reset({
index:0,
actions:[
NavigationActions.navigate({
routeName:'HomePage',
params:{
theme:theme,
selectedTab:selectedTab
},
})
]
})
navigation.dispatch(resetAction)
网友评论