二、Navigator
1. 很多时候,我们需要导航器来应对不同场景间的切换,它通过路由对象来分辨不同的场景,我们这里采用的是renderScene方法,根据指定的路由来渲染
2. 常用的属性
1) initialRoute Object 初始化路由
1. 对象格式
{
id:"main"
}
2. 这个对象主要作为路由的参数
2) renderScene function 根据每个页面的路由信息返回一个页面并渲染
1. 函数格式
(route,navigator)=><MySceneComponent title={route.title} navigator={navigator}>
route: 路由
navigator: 导航器,帮助我们做页面切换
<MySceneComponent> 页面
2. 只要涉及到页面切换都会调用这个方法,包括首页。比如,当首页加载时route对象就是initialRoute指定的对象
3) configureScene function 配置场景动画
()=>{
return Navigator.SceneConfigs .HorizontalSwipeJump;
}
可以看这个目录:node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js(可以看其他跳转的时候的方向)
3. 导航器常用的方法
1) getCurrentRoutes()
返回当前路由的列表信息
2) push(route)
导航切换到一个新的页面中,新的页面进行压入栈。通过jumpForward()方法可以回退过去
3) pop()
当前页面弹出来,跳转到栈中下一个页面,并且卸载删除掉当前的页面
4) replace(route)
只用传入的路由的指定页面进行替换掉当前的页面
5) popToTop()
进行弹出页面,导航到栈中的第一个页面,弹出来的所有页面会被卸载删除
实例:
1. 很多时候,我们需要导航器来应对不同场景间的切换,它通过路由对象来分辨不同的场景,我们这里采用的是renderScene方法,根据指定的路由来渲染
2. 常用的属性
1) initialRoute Object 初始化路由
1. 对象格式
{
id:"main"
}
2. 这个对象主要作为路由的参数
2) renderScene function 根据每个页面的路由信息返回一个页面并渲染
1. 函数格式
(route,navigator)=><MySceneComponent title={route.title} navigator={navigator}>
route: 路由
navigator: 导航器,帮助我们做页面切换
<MySceneComponent> 页面
2. 只要涉及到页面切换都会调用这个方法,包括首页。比如,当首页加载时route对象就是initialRoute指定的对象
3) configureScene function 配置场景动画
()=>{
return Navigator.SceneConfigs .HorizontalSwipeJump;
}
可以看这个目录:node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js(可以看其他跳转的时候的方向)
3. 导航器常用的方法
1) getCurrentRoutes()
返回当前路由的列表信息
2) push(route)
导航切换到一个新的页面中,新的页面进行压入栈。通过jumpForward()方法可以回退过去
3) pop()
当前页面弹出来,跳转到栈中下一个页面,并且卸载删除掉当前的页面
4) replace(route)
只用传入的路由的指定页面进行替换掉当前的页面
5) popToTop()
进行弹出页面,导航到栈中的第一个页面,弹出来的所有页面会被卸载删除
实例:
<Navigator initialRoute={{name:componentName,component:component}} configureScene={()=>{ return Navigator.SceneConfigs.PushFromRight; }} renderScene={(route,navigator)=>{ let Component = route.component; return <Component {...route.passProps} navigator={navigator}/>; }} />