【REACT NATIVE 系列教程之五】NAVIGATOR(页面导航)的基本使用与

本站文章均为李华明Himi原创,转载务必在明显处注明：
转载自【黑米GameDev街区】 原文链接:http://www.himigame.com/react-native/2248.html

今天介绍一种应用开发中常用的负责页面切换及导航功能的组件：Navigator

一：Navigator

对于页面导航其实主要功能就是：每个页面都知道本身应该切换到哪个页面，并且切到的页面会记录从哪里来，如果要返回的话，知道返回到哪个页面。这一切都不需要再用逻辑管理！而且每个页面之间也可以进行参数传递，很方便的组件。废话不多说：先上示例代码：

首先我们导入Navigator 组件：

importReact,{
...
Navigator,...
}from'react-native';

使用方式：

render(){
return(
<Navigator
initialRoute={{name:'FirstPage',component:FirstPage}}
configureScene={(route)=>{
returnNavigator.SceneConfigs.HorizontalSwipeJump;
}}
renderScene={(route,navigator)=>{
letComponent=route.component;
return<Component{...route.params}navigator={navigator}/>
}}
/>
)}

上面的代码，初始化了导航组件，且设置默认显示页面为 FirstPage，这里需要注意两点：

1. 我们主要关注Navigator 里 initialRoute 中的 两个参数：

name: 组件名

component: 组件Class名

Himi导入FirstPage时如下：

importFirstPagefrom'./FirstPage'

所以 name 和 component 都填写的为FirstPage

2.<Component {…route.params} navigator={navigator} />

上面这一行是将navigator作为props进行传递

3. Navigator.SceneConfigs.HorizontalSwipeJump

上面一行是设置页面切换之间的动画效果，更多效果查看源文件：

node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js

下面我们看下FirstPage.js:

importReact,{
AppRegistry,Component,View,Text,StyleSheet,TouchableHighlight,}from'react-native';
importSecondPagefrom'./SecondPage';
classFirstPageextendsReact.Component{
	constructor(props){
		super(props);
		this.state={};
	}
nextEvent(){
const{navigator}=this.props;
if(navigator){
navigator.push({
name:'SecondPage',component:SecondPage,params:{
titleText:''
}
})
}
}
render(){
return(
		<Viewstyle={styles.himiViewStyle}>
			<Textstyle={styles.himiTextStyle}>HimiReactNative教程</Text>
			<Viewstyle={styles.himiViewStyle}>
			<TouchableHighlight
			underlayColor='#4169e1'
			onPress={this.nextEvent.bind(this)}
			>
			<Textstyle={styles.text}>点击我进入[SecondPage]个页面</Text>
			</TouchableHighlight>
			</View>
	</View>
)}
};
varstyles=StyleSheet.create({
text:{
color:'#f00',fontSize:20,},himiViewStyle:{
flex:1,flexDirection:'column',justifyContent:'center',alignItems:'center',backgroundColor:'#F5FCFF',himiTextStyle:{
color:'#f00',fontSize:30,marginTop:70,});
module.exports=FirstPage;

这里我们主要看 nextEvent 函数内容，

const { navigator } = this.props; 这一句是以props传递过来的navigator进行接收。

得到Navigator组件，可以利用其 push 与pop两个函数进行切换下一页面与回到上个页面操作。

下面代码段演示了如何切换到下一个页面：

if(navigator){//判断是否正常接收到传来的导航组件
navigator.push({//利用此函数进行切换到指定页面
name:'SecondPage',//目标组件名
component:SecondPage,//目标组件Class名
params:{
titleText:''
}
})
}

还需要强调的是params，此参数是页面切换时传入下个页面的参数书写形式。

获取时，直接 this.props.titleText 即可得到，简单、方便。

下面代码段演示如何返回上个页面：

const{navigator}=this.props;
if(navigator){
navigator.pop();
}

返回上一页面就十分简单了，不多赘述了。

Himi这里为了演示效果，所以下面把ThreePage.js也给出源码：（最后附上动态效果图）

importReact,Alert,}from'react-native';
exportdefaultclassthreePageextendsReact.Component{
	constructor(props){
		super(props);
		this.state={};
	}
backEvent(){
const{navigator}=this.props;
if(navigator){
navigator.pop();
}
}

render(){
return(
		<Viewstyle={styles.himiViewStyle}>
			<Textstyle={styles.himiTextStyle}>ThreePage</Text>

<Viewstyle={styles.himiViewStyle}>
<TouchableHighlight
underlayColor='#4169e1'
onPress={this.backEvent.bind(this)}
>
<Textstyle={styles.text}>返回[SecondPage]页面</Text>
</TouchableHighlight>
</View>
</View>
)}
};
varstyles=StyleSheet.create({
text:{
color:'#f00',});

运行效果图：（点击查看动态效果）

从上图效果可以看出，切换之间的页面可以直接通过手势滑动进行切换～:)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!