首页 » React Native » React Native技术文章 » 正文

【React Native开发】React Native控件之Navigator组件详解以及实例(23)

(一)前言

今天我们一起来看一下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) =><MySceneComponent title={route.title} navigator={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 (
      <TouchableHighlight
        style={styles.button}
        underlayColor="#B5B5B5"
        onPress={this.props.onPress}>
        <Text style={styles.buttonText}>{this.props.text}</Text>
      </TouchableHighlight>
    );
  }
}
class NavMenu extends React.Component {
  render() {
    return (
      <View style={styles.scene}>
        <Text style={styles.messageText}>{this.props.message}</Text>
        <NavButton
          onPress={() => {
            this.props.navigator.push({
              message: '向右拖拽关闭页面',
              sceneConfig: Navigator.SceneConfigs.FloatFromRight,
            });
          }}
          text="从右边向左切入页面(带有透明度变化)"
        />
        <NavButton
          onPress={() => {
            this.props.navigator.push({
              message: '向下拖拽关闭页面',
              sceneConfig: Navigator.SceneConfigs.FloatFromBottom,
            });
          }}
          text="从下往上切入页面(带有透明度变化)"
        />
        <NavButton
          onPress={() => {
            this.props.navigator.pop();
          }}
          text="页面弹出(回退一页)"
        />
        <NavButton
          onPress={() => {
            this.props.navigator.popToTop();
          }}
          text="页面弹出(回退到最后一页)"
        />
      </View>
    );
  }
}
class NavigatorDemo extends Component {
  render() {
    return (
      <Navigator
        style={styles.container}
        initialRoute={{ message: '初始页面', }}
        renderScene={ (route, navigator) => <NavMenu
            message={route.message}
            navigator={navigator}
          />}
         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丶清(http://www.lcode.org/) 侵权必究!

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

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