React Native的Navigator详解

最新推荐文章于 2024-08-20 17:46:44 发布
最新推荐文章于 2024-08-20 17:46:44 发布
阅读量2w 收藏 8
点赞数 4
分类专栏： React Native 文章标签： ios native React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hello_hwc/article/details/51444540
版权

欢迎Follow我的Github，博客会同步在Github的Blog仓库更新。也可以关注我的CSDN博客的React Native分类

前言

除了极少数特殊设计的App，导航都是一个App重要组成的部分。导航栏能够维护一个导航堆栈，能够让用户清楚的知道自己当前所处的页面和返回的页面。

在React Native中，官方推荐使用Navigator,因为这个能够在iOS和安卓中通用,不过在现在（2016年5月18日）,Navigator 性能较差。所以，对iOS应用，往往可以使用NavigatorIOS，你将获得系统的iOS导航栏性能和动画。但是对Android App，只能用Navigator。

文档

目前的文档都可以在这里找到,这里我列出常用的部分。

常用参数

  • configureScene，类型是function，可选。通过这个参数可以修改界面在导航时候切换的动画。
(route, routeStack) => Navigator.SceneConfigs.FloatFromRight

  • initialRoute，类型是对象，表明最初的Route对象。一个Route简单来说就是一个界面，Navigator用Route来区分不同的界面。

  • navigationBar，类型是node，导航栏

  • renderScene，类型是function，必须参数，在这个方法里根据Route来渲染不同的Scene。

常用函数

  • push(route) ，跳转到某一个Route

  • pop()，推出当前状态

  • popToTop()，推出到第一个界面

  • popToRoute(route)，推出到某一个界面

Getting start

创建一个工程，打开终端，到一个想要的路径，然后

react-native init LHWeather --verbose


Tips:调用上述代码会从网络上下载几十M的数据，所以添加–verbose不会让你等的心烦意乱。

然后

react-native run-ios

会启动模拟器,如果启动成功，说明项目创建成功。

我们首先会创建一个这样效果工程

这时候的index.ios.js 中代码如下

var React = require('react');
 import {
   View,
   Text,
   StyleSheet,
   AppRegistry,
   TouchableHighlight,
   Navigator,
 } from 'react-native';

 var LHWeather  = React.createClass({
    render(){
      return (
        <Navigator
          style = {styles.container}
          initialRoute={{id:"main",}}
          renderScene={this.renderNav}
          />
      );
    },
    renderNav(route,nav){
        switch (route.id) {
          case 'main':
            return <MainScreen navigator={nav} title="Main"/ >;
          case 'detail':
            return (<DetailScreen navigator={nav} title="Detail"/ >);
        }
    }
 });

 var MainScreen = React.createClass({
   toDetail(){
     this.props.navigator.push({id:"detail"});
  },
   render(){
     return (
       <View style={styles.containView}>
         <TouchableHighlight
          style={styles.button}
          onPress={this.toDetail}
          underlayColor="#B5B5B5">
            <Text style={styles.blackText}>=>详情页</Text>
         </TouchableHighlight>
       </View>
     );
   }
 });
 var DetailScreen = React.createClass({
   toMain(){
     this.props.navigator.pop();
   },
   render(){
     return (
       <View style={styles.detailContainView}>
         <TouchableHighlight
          style={styles.button}
          onPress={this.toMain}
          underlayColor="green">
            <Text style={styles.blackText}>{'主页<='}</Text>
         </TouchableHighlight>
       </View>
     );
   }
 });
 const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
   button: {
     padding: 15,
   },
   containView:{
     flex: 1,
     justifyContent: 'center',
   },
   detailContainView:{
     flex:1,
     justifyContent: 'center',
     backgroundColor:'green',
   },
   blackText:{
     fontSize:20,
     textAlign:'center',
   },
 });
 AppRegistry.registerComponent('LHWeather', () => LHWeather);

简单讲解下关于Navigator的部分

 <Navigator
      style = {styles.container}
      initialRoute={{id:"main",}}
      renderScene={this.renderNav}
 />
 renderNav(route,nav){
     switch (route.id) {
       case 'main':
         return <MainScreen navigator={nav} title="Main"/ >;
       case 'detail':
        return (<DetailScreen navigator={nav} title="Detail"/ >);
    }
}
  • 上述代码中的Route很简单，只是一个含有属性id的Object,然后，通过id来判断需要渲染成哪个Scene。
  • navigator={nav}用来把当前navigator的引用传递给实际要展示的Scene

设置转场动画类型和手势

讲上文的Navigator修改成如下

  <Navigator
          style = {styles.container}
          initialRoute={{id:"main",}}
          renderScene={this.renderNav}
          configureScene={(route, routeStack) => Navigator.SceneConfigs.FloatFromBottom}

      />

这样，转场动画会变成从底部推到顶部。可选的参数如下

Navigator.SceneConfigs.PushFromRight (default)
Navigator.SceneConfigs.FloatFromRight
Navigator.SceneConfigs.FloatFromLeft
Navigator.SceneConfigs.FloatFromBottom
Navigator.SceneConfigs.FloatFromBottomAndroid
Navigator.SceneConfigs.FadeAndroid
Navigator.SceneConfigs.HorizontalSwipeJump
Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
Navigator.SceneConfigs.VerticalUpSwipeJump
Navigator.SceneConfigs.VerticalDownSwipeJump

添加导航栏

为Navigator继续添加一个导航栏navigationBar

  <Navigator
          style = {styles.container}
          initialRoute={{id:"main",title:"Main"}}
          renderScene={this.renderNav}
          configureScene={(route, routeStack) => Navigator.SceneConfigs.HorizontalSwipeJump}
          navigationBar={
            <Navigator.NavigationBar
              routeMapper={NavigationBarRouteMapper}
              style={styles.navBar}
           />
          }
   />

这里提到了另外一个控件Navigator.NavigatorBar,这个内嵌的NavigatorBar控件，一个属性是

  • routeMapper


这个属性的目的是告诉Navigator如何根据每个Sence渲染自己

这里的NavigationBarRouteMapper是

var NavigationBarRouteMapper = {
   //左边Button
   LeftButton: function(route, navigator, index, navState) {
     if (route.id === 'main') {
       return null;
     }
     var previousRoute = navState.routeStack[index - 1];
     return (
       <TouchableOpacity
         onPress={() => navigator.pop()}
         style={styles.navBarLeftButton}>
         <Text style={[styles.navBarText, styles.navBarButtonText]}>
           {previousRoute.title}
         </Text>
       </TouchableOpacity>
     );
   },
      //右边Button
   RightButton: function(route, navigator, index, navState) {
     if (route.id === 'detail') {
       return null;
     }
     return (
       <TouchableOpacity
         onPress={() => navigator.push({id:'detail',title:'Detail'})}
         style={styles.navBarRightButton}>
         <Text style={[styles.navBarText, styles.navBarButtonText]}>
           Next
         </Text>
       </TouchableOpacity>
     );
   },
   //标题
   Title: function(route, navigator, index, navState) {
     return (
       <Text style={[styles.navBarText, styles.navBarTitleText]}>
         {route.title}
       </Text>
     );
   },
 };

同时，要在StylesSheet中添加用到的Style

   navBar: {
  backgroundColor: 'white',
  },
  navBarText: {
    fontSize: 16,
    marginVertical: 10,
  },
  navBarTitleText: {
    color: '#373E4D',
    fontWeight: '500',
    marginVertical: 9,
  },
  navBarLeftButton: {
    paddingLeft: 10,
  },
  navBarRightButton: {
    paddingRight: 10,
  },
  navBarButtonText: {
    color: '#5890FF',
  },

并且import中添加

   TouchableOpacity,

这时候的效果如下

添加返回图片

到这里就很简单了，只需要在LeftButton中换成显示一张图片
修改navBarLeftButton的Style

  navBarLeftButton: {
    paddingLeft: 10,
    paddingTop:6,
  },

然后，添加一个Style

   backImage:{
     width:13,
     height:26,
   },

修改LeftButton

 <TouchableOpacity
         onPress={() => navigator.pop()}
         style={styles.navBarLeftButton}>
         <Image source={require('./back.png')} style={styles.backImage}>
         </Image>
       </TouchableOpacity>

传递数据


Navigator传递数据使用Route

例如，在Main Screen中，传递data 给Route

toDetail(){
     this.props.navigator.push({id:"detail",title:"Detail",data:"Passed from Main screen"});
  },

然后，渲染的时候，传递data给DetailScreen的props

  case 'detail':
            return (<DetailScreen navigator={nav} title="Detail" data={route.data}/>);

然后，获取数据，进行渲染

Text style={styles.blackText}>{this.props.data}</Text>

最后

附上完整代码

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

 var React = require('react');
 import {
   View,
   Text,
   StyleSheet,
   AppRegistry,
   TouchableHighlight,
   Navigator,
   TouchableOpacity,
   Image,
 } from 'react-native';

 var NavigationBarRouteMapper = {
   LeftButton: function(route, navigator, index, navState) {
     if (route.id === 'main') {
       return null;
     }
     var previousRoute = navState.routeStack[index - 1];
     return (
       <TouchableOpacity
         onPress={() => navigator.pop()}
         style={styles.navBarLeftButton}>
         <Image source={require('./back.png')} style={styles.backImage}>
         </Image>
       </TouchableOpacity>
     );
   },
   RightButton: function(route, navigator, index, navState) {
     if (route.id === 'detail') {
       return null;
     }
     return (
       <TouchableOpacity
         onPress={() => navigator.push({id:'detail',title:'Detail'})}
         style={styles.navBarRightButton}>
         <Text style={[styles.navBarText, styles.navBarButtonText]}>
           Next
         </Text>
       </TouchableOpacity>
     );
   },

   Title: function(route, navigator, index, navState) {
     return (
       <Text style={[styles.navBarText, styles.navBarTitleText]}>
         {route.title}
       </Text>
     );
   },
 };

 var LHWeather  = React.createClass({
    render(){
      return (
        <Navigator
          style = {styles.container}
          initialRoute={{id:"main",title:"Main"}}
          renderScene={this.renderNav}
          configureScene={(route, routeStack) => Navigator.SceneConfigs.HorizontalSwipeJump}
          navigationBar={
            <Navigator.NavigationBar
              routeMapper={NavigationBarRouteMapper}
              style={styles.navBar}
           />
          }
          />
      );
    },
    renderNav(route,nav){
        switch (route.id) {
          case 'main':
            return <MainScreen navigator={nav} title="Main"/ >;
          case 'detail':
            return (<DetailScreen navigator={nav} title="Detail" data={route.data}/>);
        }
    }
 });

 var MainScreen = React.createClass({
   toDetail(){
     this.props.navigator.push({id:"detail",title:"Detail",data:"Passed from Main screen"});
  },
   render(){
     return (
       <View style={styles.containView}>
         <TouchableHighlight
          style={styles.button}
          onPress={this.toDetail}
          underlayColor="#B5B5B5">
            <Text style={styles.blackText}>=>详情页</Text>
         </TouchableHighlight>
       </View>
     );
   }
 });
 var DetailScreen = React.createClass({
   toMain(){
     this.props.navigator.pop();
   },
   render(){
     return (
       <View style={styles.detailContainView}>
         <TouchableHighlight
          style={styles.button}
          onPress={this.toMain}
          underlayColor="green">
            <Text style={styles.blackText}>{this.props.data}</Text>
         </TouchableHighlight>
       </View>
     );
   }
 });
 const styles = StyleSheet.create({
   backImage:{
     width:13,
     height:26,
   },
   container: {
     flex: 1,
   },
   navBar: {
     backgroundColor: 'white',
   },
   button: {
     padding: 15,
   },
   containView:{
     flex: 1,
     backgroundColor:'gray',
     justifyContent: 'center',
   },
   detailContainView:{
     flex:1,
     justifyContent: 'center',
     backgroundColor:'green',
   },
   blackText:{
     fontSize:20,
     textAlign:'center',
   },
   navBar: {
    backgroundColor: 'white',
   },
  navBarText: {
    fontSize: 16,
    marginVertical: 10,
  },
  navBarTitleText: {
    color: '#373E4D',
    fontWeight: '500',
    marginVertical: 9,
  },
  navBarLeftButton: {
    paddingLeft: 10,
    paddingTop:6,
  },
  navBarRightButton: {
    paddingRight: 10,
  },
  navBarButtonText: {
    color: '#5890FF',
  },
 });

 AppRegistry.registerComponent('LHWeather', () => LHWeather);
黄文臣
关注
专栏目录
React Native react-navigation 导航使用详解
08-28
React Native 中的 react-navigation 库是新兴的开源库，由 Facebook 推荐使用，并且在 React Native 当前最新版本 0.44 中将 Navigator 删除。react-navigation 库具有原生般的性能体验效果，可能会成为未来 React ...
React Native页面导航：从Navigator到React Navigation
最新发布
weixin_42186015的博客
09-11 1228
本文还有配套的精品资源，点击获取 简介：React Native开发中，页面间导航是应用核心，Navigator组件是早期的导航解决方案。尽管已由React Navigation等更先进的库替代，但理解Navigator的原理对掌握RN导航概念仍至关重要。本简介探讨了Navigator组件的工作机制、NavigatorIOS的特定用法，并概述了现代RN导航库的发展。 ...
前端宝典九：React Native从入门到精通实战
franktaoge的博客
08-20 1446
本文主要介绍 1. React Native新旧框架对比 2. React与React Native区别 3. React Native性能优化 其中第3点React Native性能优化的拆包分包，是项目实战中使用过的，在这里整理分享，如果没有用过的小伙伴会觉得晦涩难懂，建议按照在实际项目中需要去实践，纸上得来终觉浅，绝知此事要躬行。
React Native Navigator
m0_37068028的博客
09-28 357
Navigator 是react native @0.43之前自带的导航组件1. Navigator 是什么？ 一个导航组件 进入下一个界面，返回上一个界面 传递数据给下一个界面，返回数据给上一个界面 2. 使用 导入Navigator （自带组件） render返回Navigator 调用Navigator的相应方法 3. 示例： 两个组件间的跳转和传递数据 入口文件// index.iso.js
ReactNative的Navigator组件使用方式
u011904605的博客
11-28 727
http://www.jianshu.com/p/91fa0f34895e http://www.jianshu.com/p/91fa0f34895e http://www.jianshu.com/p/91fa0f34895e ReactNative的Navigator组件使用方式 字数1482 阅读4974 评论22 喜欢42 欢迎Follow我
react-native中的navigator
weixin_30498807的博客
04-03 246
第一步安装相关插件 添加一些依赖 package com.awesomeproject; import com.facebook.react.ReactActivity; import com.facebook.react.ReactActivityDelegate; import com.facebook.react.ReactRootView; import com.swmansion...
react native Navigator
u010674395的专栏
09-13 637
下面代码来自http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E6%8E%A7%E4%BB%B6%E4%B9%8Bnavigator%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3%E4%BB%A5%E5%8F%8A%E5%AE%9E%E4%BE%8B23/
详解React Native顶|底部导航使用小技巧
08-29
React Native 提供了多种导航组件供我们使用，包括 NavigatorIOS 和 Navigator，但是 NavigatorIOS 只能用于 iOS 平台，而 Navigator 在 React Native 0.44 版本以后已经被移除了。幸好，有人提供了更好的导航组件，...
React Native学习之Android的返回键BackAndroid详解
08-29
在React Native中，Android平台的返回键管理是一个重要的部分，特别是在构建跨平台应用时。`BackAndroid`（在新版本中已更新为`BackHandler`）是React Native提供的API，用于处理Android设备上的物理返回键事件。这...
React Native]React Native组件之Navigator
大灰狼的小绵羊哥哥的博客
02-16 745
1.简介 导航组件Navigator可以让app在不同页面进行切换。为达到这样的功能，Navigator提供了路由对象功能进行区分每个页面。  我们可以通过renderScene方法，Navaigator根据指定的路由进行渲染指定的界面。  除了以上功能之外，为了改变页面切换的动画或者页面的手势，该组件还提供configureScene属性来进行获取指定路由页面的配置对象信息。  对于
React_native Navigator页面跳转组件参数传递
06-30
React_native Navigator页面跳转，组件参数传递,及页面之间的参数传递
React—native 之 Navigator （导航路由）组件
QTFYING的博客
12-07 1271
# React Native 的 Navigator 组件 > 欢迎Follow我的GitHub: https://github.com/SpikeKing **React Native**的编程思想类似于``iOS``, 导航栏也使用``Navigator``作为标识, 类似于``Android``的``ActionBar``. 导航栏作为最重要的应用组件之一, 除了处理页面
React Native中Navigator的安装与使用
weixin_30484247的博客
10-25 125
一、安装Navigator 1.安装react-native-deprecated-custom-components npm install react-native-deprecated-custom-components --save 2.若npm安装报错，则执行下面命令 npm i react-native-deprecated-custom-compo...
react native 的 Navigator
wangrong111222的博客
12-16 151
首先安装 Navigator  npm i -S react-native-deprecated-custom-components 引入Navigator import {Navigator} from 'react-native-deprecated-custom-components' 再次说一遍报错 就把node_module删了重新 装 ，我严重怀疑是不是 要每次装新包的时候都...
React-Native之Navigator
李白也的博客
01-03 237
Navigator 简单使用
ReactNative-Navigator
无
05-19 217
Navigator的基本使用Navigator 是什么？   一个导航组件    进入下一个界面，返回上一个界面    传递数据给下一个界面 ， 返回数据给上一个界面如何使用Navigator      导入Navigator-----&gt; render中返回Navigator-----&gt;调用Navigator的相应方法...
react-native学习二（navigator例子）
Jinrong
11-17 122
StackNavigator import React from 'react'; import { View, Text, Button } from 'react-native'; import { StackNavigator } from 'react-navigation'; // 1.0.0-beta.14 const HomeScreen = ({ navigation }) => ( <View style={{ flex: 1, alignItems: 'center.
react-native之 react-navigation
岁月静好，善待时光。
08-10 668
react-navigation准确的说不是一个官方推出的库, 但是一经推出, 就受到了广大开发者的喜爱, 官方也废弃了自己曾经的导航库 navigator, 转而在官方文档上推荐这个第三方. 传送门 接下来通过一个例子, 主要来说一下createStackNavigator 和 createBottomTabNavigator 的实际用法. 1.安装 在项目文件夹目录下, 输入命令行: ...
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值