React Native 控件之 Navigator 组件详解以及实例

江清清
2,382 阅读5分钟
原文链接： www.lcode.org

(一)前言

今天我们一起来看一下Navigator组件详解以及实例

刚创建的React Native技术交流2群(496601483),欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

导航组件Navigator可以让我们客户端在不同的页面见进行切换。为了达到这样的功能，Navigator提供了路由对象功能进行区分识别每一个页面。同时我们可以通过renderScene方法，Navaigator根据指定的路由进行渲染指定的界面。

除了以上功能之外，为了改变页面切换的动画或者页面的手势，该组件还提供configureScene属性来进行获取指定路由页面的配置对象信息。对于页面切换动画或者更多的屏幕配置选项信息详情可以查看Navigator.SceneConfigs

关于动画手势还有如下一些属性:

  1. PushFromRight
  2. FloatFromRight
  3. FloatFromLeft
  4. FloatFromBottom
  5. FloatFromBottomAndroid
  6. FadeAndroid
  7. HorizontalSwipeJump
  8. HorizontalSwipeJumpFromRight
  9. VerticalUpSwipeJump
  10. VerticalDownSwipeJump

更多属性大家可以进行修改NavigatorSceneConfigs.js该文件即可~大家也可以给该项目提交pull request噶~

(二)导航器方法

在使用导航器的时候，如果你已经获取了导航器对象的引用，我们可以进行调用以下一些方法来实现页面导航功能:

  • getCurrentRoutes()    该进行返回存在的路由列表信息
  • jumpBack()    该进行回退操作  但是该不会卸载(删除)当前的页面
  • jumpForward()    进行跳转到相当于当前页面的下一个页面
  • jumpTo(route)    根据传入的一个路由信息，跳转到一个指定的页面(该页面不会卸载删除)
  • push(route)     导航切换到一个新的页面中，新的页面进行压入栈。通过jumpForward()方法可以回退过去
  • pop()   当前页面弹出来，跳转到栈中下一个页面，并且卸载删除掉当前的页面
  • replace(route)   只用传入的路由的指定页面进行替换掉当前的页面
  • replaceAtIndex(route,index)     传入路由以及位置索引，使用该路由指定的页面跳转到指定位置的页面
  • replacePrevious(route)    传入路由，通过指定路由的页面替换掉前一个页面
  • resetTo(route)  进行导航到新的界面，并且重置整个路由栈
  • immediatelyResetRouteStack(routeStack)   该通过一个路由页面数组来进行重置路由栈
  • popToRoute(route)   进行弹出相关页面，跳转到指定路由的页面，弹出来的页面会被卸载删除
  • popToTop()  进行弹出页面，导航到栈中的第一个页面，弹出来的所有页面会被卸载删除

(三)导航器属性风格

  • configureScene  function 方法，该为可选的方法进行配置页面切换动画和手势。该会通过路由和路由栈两个参数调用，进行返回一个页面参数配置对象：(route, routeStack) => Navigator.SceneConfigs.FloatFromRight
  • initialRoute  object  参数对象  进行设置导航初始化的路由页面。路由是标识导航器渲染标识每一个页面的对象。initialRoute必须为initialRouteStack中的路由。同时initialRoute默认为initialRouteStack中路由栈的最后一项
  • initialRouteStack  [object] 参数对象数组   该是一个初始化的路由数组进行初始化。如果initalRoute属性没有设置的话，那么就必须设置initialRouteStack属性，使用该最后一项作为初始路由。 如果initalRouteStack属性没有设置的话，该会生成只包含initalRoute值的数组
  • navigationBar  node  该为可选的参数，在页面切换中用来提供一个导航栏
  • navigator object   该为可选参数，可以从父类导航器中获取导航器对象
  • onDidFoucs  function  该方法已经废弃，我们可以使用navigationContext.addListener('didfocus',callback)方法进行替代。该会在每次页面切换完成或者初始化之后进行调用该方法。该参数为新页面的路由
  • onWillFocus function  该方法已经废弃，我们可以使用navigationContext.addListener('willfocus',callback)方法进行替代。该会页面每次进行切换之前调用
  • renderScene  function  该为必须调用的方法，该用来渲染每一个路由指定的页面。参数为路由以及导航器对象两个参数，具体是方法如下:(route, navigator) =>
  • sceneStyle 样式风格，该继承了View视图的所有样式风格。可以参照:点击查看View样式。 该设置用于每个页面容器的风格

(四)导航器实例

上面给大家介绍一下导航器组件的基本使用和属性，下面给大家演示一下导航器Navigator的实例使用（通过官方实例修改），具体代码如下:

/**
 * 导航器组件实例
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  Navigator,
} from 'react-native';

class NavButton extends React.Component {
  render() {
    return (
      
        {this.props.text}
      
    );
  }
}
class NavMenu extends React.Component {
  render() {
    return (
      
        {this.props.message}
         {
            this.props.navigator.push({
              message: '向右拖拽关闭页面',
              sceneConfig: Navigator.SceneConfigs.FloatFromRight,
            });
          }}
          text="从右边向左切入页面(带有透明度变化)"
        />
         {
            this.props.navigator.push({
              message: '向下拖拽关闭页面',
              sceneConfig: Navigator.SceneConfigs.FloatFromBottom,
            });
          }}
          text="从下往上切入页面(带有透明度变化)"
        />
         {
            this.props.navigator.pop();
          }}
          text="页面弹出(回退一页)"
        />
         {
            this.props.navigator.popToTop();
          }}
          text="页面弹出(回退到最后一页)"
        />
      
    );
  }
}
class NavigatorDemo extends Component {
  render() {
    return (
       }
         configureScene={(route) => {
          if (route.sceneConfig) {
            return route.sceneConfig;
          }
          return Navigator.SceneConfigs.FloatFromBottom;
        }}
      />
    );
  }
}
const styles = StyleSheet.create({
   container: {
    flex: 1,
   },
   messageText: {
    fontSize: 17,
    fontWeight: '500',
    padding: 15,
    marginTop: 50,
    marginLeft: 15,
  },
  button: {
    backgroundColor: 'white',
    padding: 15,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#CDCDCD',
  },
});

AppRegistry.registerComponent('NavigatorDemo', () => NavigatorDemo);

运行截图如下:

查看图片

(五)最后总结

今天我们主要学习一下导航器组件Navigator的详解以及实例使用演示,今天讲解的Navigator实例还是属于比较基础的，后面会讲解更多深入详细的文章

。大家有问题可以加一下群React Native技术交流2群(496601483)或者底下进行回复一下。

尊重原创，转载请注明：From Sky丶清（www.lcode.org/） 侵权必究！

关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)

查看图片

关注我的微博，可以获得更多精彩内容

avatar
文章
阅读
粉丝