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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了REACT NATIVE 系列教程之五NAVIGATOR(页面导航)的基本使用与传参相关的知识,希望对你有一定的参考价值。

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


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

一:Navigator

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

首先我们导入 Navigator 组件:

import React, {
   ...
   Navigator,
   ...
} from ‘react-native‘;

使用方式:

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


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

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

name: 组件名

component: 组件Class名

Himi导入FirstPage时如下:

import FirstPage from ‘./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 :

import React, {
  AppRegistry,
  Component,
  View,
  Text,
  StyleSheet,
  TouchableHighlight,
} from ‘react-native‘;
import SecondPage from ‘./SecondPage‘;
class FirstPage extends React.Component {
	constructor(props) {
		super(props);
		this.state = { };
	}
  nextEvent(){
    const { navigator } = this.props;
    if(navigator) {
      navigator.push({
          name: ‘SecondPage‘,
          component: SecondPage, 
          params: {
            titleText:‘‘
          }
      })
    }
  }
  render() {
    return (
		<View style={styles.himiViewStyle} >
			<Text style={styles.himiTextStyle}>Himi React Native 教程 </Text>
			<View style={styles.himiViewStyle}> 
			<TouchableHighlight 
			  underlayColor=‘#4169e1‘
			  onPress={this.nextEvent.bind(this)}  
			  > 
			    <Text style={styles.text} > 点击我进入[SecondPage]个页面 </Text>
			</TouchableHighlight>
			</View>
    	</View>
  )} 
};
var styles = 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也给出源码:(最后附上动态效果图)

import React, {
  AppRegistry,
  Component,
  View,
  Text,
  Alert,
  StyleSheet,
  TouchableHighlight,
} from ‘react-native‘;
export default class threePage extends React.Component {
	constructor(props) {
		super(props);
		this.state = { };
	}
  backEvent(){
    const { navigator } = this.props;
    if(navigator) {
        navigator.pop();
    }
  }
  
  render() {
    return (
		<View style={styles.himiViewStyle} >
			<Text style={styles.himiTextStyle}> ThreePage </Text>
      
      <View style={styles.himiViewStyle}> 
        <TouchableHighlight 
          underlayColor=‘#4169e1‘
          onPress={this.backEvent.bind(this)}  
          > 
            <Text style={styles.text} >  返回[SecondPage]页面 </Text>
        </TouchableHighlight>
      </View>
    </View>
  )} 
};
var styles = 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,
  },
  
});


运行效果图:(点击查看动态效果)

技术分享

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

本文出自 “李华明Himi” 博客,请务必保留此出处http://xiaominghimi.blog.51cto.com/2614927/1782626

以上是关于REACT NATIVE 系列教程之五NAVIGATOR(页面导航)的基本使用与传参的主要内容,如果未能解决你的问题,请参考以下文章

REACT NATIVE 系列教程之九REACT NATIVE版本升级步骤与注意事项!

REACT NATIVE 系列教程之九REACT NATIVE版本升级步骤与注意事项!

REACT NATIVE 系列教程之三函数绑定与FLEXBOX是用好REACT的基础

REACT NATIVE 系列教程之十二REACT NATIVE(JS/ES)与IOS(OBJECT-C)交互通信

REACT NATIVE 系列教程之十一插件的安装使用与更新(示例:REACT-NATIVE-TAB-NAVIGATOR)

REACT NATIVE 系列教程之十一插件的安装使用与更新(示例:REACT-NATIVE-TAB-NAVIGATOR)