【React Native开发】 - 导航器Navigator的使用
1.Navigator的认识
官方介绍：使用Navigator可以使的应用在不同场景（页面）之间进行切换。Navigator通过路由对象（route）分辨不同的
场景（页面）。利用renderScene()方法，导航栏可以根据指定的路由来渲染场景（页面）。
Navigator可以通过configureScene属性获取路由对象的配置信息，从而改变场景的动画或手势。
2.Navigator属性
- initialRoute object 参数对象 进行设置导航初始化的路由页面。路由是标识导航器渲染标识每一个页面的对象。initialRoute必须为initialRouteStack中的路由。同时initialRoute默认为initialRouteStack中路由栈的最后一项。
- initialRouteStack [object] 参数对象数组 是一个初始化的路由数组。如果initalRoute属性没有设置的话，那么就必须设置initialRouteStack属性，使用最后一项作为初始路由。 如果initalRouteStack属性没有设置的话，会生成只包含initalRoute值的数组。
- configureScene function 方法，为可选的方法，进行配置页面切换动画和手势。通过路由和路由栈两个参数调用，返回一个页面参数配置对象：
configureScene = {
(route,routeStack) => {
return Navigator.SceneConfigs.FloatFromRight; //配置场景动画，页面之间跳转时候的动画
}
}
- navigator object 可选参数，可以从父类导航器中获取导航器对象。
- navigationBar node 该为可选的参数，在页面切换中用来提供一个导航栏。
- renderScene function 必须调用的方法，用来渲染每一个路由指定的页面。参数为路由以及导航器对象两个参数。
- sceneStyle 样式风格，该继承了View视图的所有样式风格。
场景转场动画的分类：
Navigator.SceneConfigs.PushFromRight (default)
Navigator.SceneConfigs.FloatFromRightNavigator.SceneConfigs.FloatFromLeft
Navigator.SceneConfigs.FloatFromBottom
Navigator.SceneConfigs.FloatFromBottomAndroid
Navigator.SceneConfigs.FadeAndroid
Navigator.SceneConfigs.HorizontalSwipeJump
Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
Navigator.SceneConfigs.VerticalUpSwipeJump
Navigator.SceneConfigs.VerticalDownSwipeJump
3.Navigator方法
- getCurrentRoutes() 返回存在的路由列表信息
- jumpBack() 回退操作，但是不会卸载（删除）当前页面
- jumpForward() 跳转到相对于当前页面的下一个页面
- jumpTo(route) 根据传入的路由信息，跳转到一个指定的页面（该页面不会卸载删除）
- push(route) 导航切换到一个新的页面，新的页面进行入栈。通过jumpForward()方法可以回退过去
- pop 当前页面弹出来，跳转到栈中下一个页面，并且卸载删除掉当前的页面
- replace(route) 传入路由的指定页面进行替换掉当前的页面
- replaceAtIndex(route, index) 传入路由以及位置索引，使用该路由指定的页面跳转到指定位置的页面
- replacePrevious(route) 传入路由，通过指定路由的页面替换掉前一个页面
- resetTo(route) 进行导航到新的界面，并且重置整个路由栈
- immediatelyResetRouteStack(routeStack) 该通过一个路由页面数组来进行重置路由栈
- popToRoute(route) 进行弹出相关页面，跳转到指定路由的页面，弹出来的页面会被卸载删除
- popToTop() 进行弹出页面，导航到栈中的第一个页面，弹出来的所有页面会被卸载删除
4.实例
index.android.js和index.ios.js代码：
import './luancher'
luancher.js
import React, { Component } from 'react';import {
AppRegistry,
} from 'react-native';
import Root from './navigator/root'AppRegistry.registerComponent('ImageDemo', () => Root);
使Android和IOS都可运行。
root.js
import React ,{Component} from 'react'import {
StyleSheet,
View,
Text,
Navigator,
Dimensions,
Platform,
StatusBar,
} from 'react-native'
import Home from './Home'
export default class Root extends Component{
constructor(props){
super(props)
}
render(){
return (
Platform.OS === 'ios'?(
<View style={styles.container}>
<Navigator
initialRoute = {{name: 'home', component: Home}} //初始化导航器Navigator,指定默认的页面
configureScene = {
(route,routeStack) => {
return Navigator.SceneConfigs.FloatFromRight; //配置场景动画，页面之间跳转时候的动画
}
}
renderScene = {
(route, navigator) =>{ //route里其实就是我们传递的name,component，navigator是一个 Navigator的对象
let Component = route.component;
return <Component{...route.params} navigator = {navigator} /> //渲染场景 navigator作为props传递给了这个 component。
}
}
/>
</View>
):(
<View style={styles.container}>
<StatusBar
backgroundColor="#FD6363"
barStyle="light-content"/>
<Navigator
initialRoute = {{name: 'home', component: Home}} //初始化导航器Navigator,指定默认的页面
configureScene = {
(route) => {
return Navigator.SceneConfigs.FloatFromRight; //配置场景动画，页面之间跳转时候的动画
}
}
renderScene = {
(route, navigator) =>{ //route里其实就是我们传递的name,component，navigator是一个 Navigator的对象
let Component = route.component;
return <Component{...route.params} navigator = {navigator} /> //渲染场景 navigator作为props传递给了这个 component。
}
}
/>
</View>
)
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,
},
})
root.js解析：initialRoute初始化一个Route（路由），定义初始化的Component；
configureScene设置页面切换的动画；
renderScene渲染场景，指定路由和导航器，并把导航器传递进去。
Home.js
import React,{Component} from 'react'import {
StyleSheet,
View,
Text,
Navigator,
TouchableHighlight,
Dimensions,
} from 'react-native'
import Detail from './Detail'
const {width,height} = Dimensions.get('window')
export default class Home extends Component{
constructor(props){
super(props)
}
render(){
return (
<View style={styles.btn}>
<TouchableHighlight style={styles.touchableBtn} onPress={this.toPage.bind(this)}>
<Text style={styles.text}>跳转页面</Text>
</TouchableHighlight>
</View>
)
}
toPage(){
const {navigator} = this.props
if (navigator){
navigator.push({
name:'detail',
component:Detail,
})
}
}
}
const styles = StyleSheet.create({
btn:{
justifyContent:'center',
alignItems:'center',
backgroundColor:'#fff',
height:height,
},
touchableBtn:{
backgroundColor:'#FD6363',
padding:8,
borderRadius:8,
},
text:{
color:'#fff',
fontSize:12,
},
})
Home.js解析：
toPage(){ const {navigator} = this.props
if (navigator){
navigator.push({
name:'detail',
component:Detail,
})
}
}
navigator.push压栈 const {navigator} = this.props //从props中取的Navigator，确保用的是同一个
Detail.js
import React ,{Component} from 'react'import {
StyleSheet,
View,
Text,
Image,
TouchableHighlight,
Dimensions,
} from 'react-native'
const {width,height} = Dimensions.get('window')
export default class Detail extends Component{
constructor(props){
super(props)
}
back(){
const{navigator} = this.props;
if(navigator){
navigator.pop(); //navigator.pop 使当前页面出栈, 显示上一个栈内页面.
}
}
render(){
return (
<View style={styles.container}>
<View style={styles.titleStyle}>
<TouchableHighlight onPress={this.back.bind(this)}>
<Image source={require('./images/ic_back.png')} style={styles.back}></Image>
</TouchableHighlight>
<Text style={styles.textStyle}>详情页</Text>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,
},
titleStyle:{
flexDirection:'row',
height:40,
backgroundColor:'#FD6363',
alignItems:'center',
},
back:{
marginLeft:10,
width:25,
height:25,
},
textStyle:{
position:'absolute',
color:'#fff',
fontSize:14,
top:12,
left:(width/2-12),
},
})
5.效果
点击跳转页面按钮 跳转到详情页面
点击返回按钮再次返回到上一页面
以上是 【React Native开发】 - 导航器Navigator的使用 的全部内容， 来源链接： utcz.com/z/381150.html
