React Native中NavigatorIOS组件的简单使用（react native 组件）

25-02-13 15

对于想了解ReactNative中NavigatorIOS组件的简单使用的读者，本文将是一篇不可错过的文章，我们将详细介绍reactnative组件，并且为您提供关于ReactNative的Navig

对于想了解React Native中NavigatorIOS组件的简单使用的读者，本文将是一篇不可错过的文章，我们将详细介绍react native 组件，并且为您提供关于React Native 的 Navigator 组件使用方式、React Native中NavigatorIOS组件的简单使用详解、React Native中NavigatorIOS组件简单使用教程、React Native中NavigatorIOS组件（详细教程说明）的有价值信息。

本文目录一览：

React Native中NavigatorIOS组件的简单使用（react native 组件）
React Native 的 Navigator 组件使用方式
React Native中NavigatorIOS组件的简单使用详解
React Native中NavigatorIOS组件简单使用教程
React Native中NavigatorIOS组件（详细教程说明）

React Native中NavigatorIOS组件的简单使用（react native 组件）

NavigatorIOS 导航

NavigatorIOS是React Native自带的导航组件，下面是它的简单应用。

初始化第一个场景

import PropTypes from 'prop-types';
import React,{ Component } from 'react';
import { NavigatorIOS,Text } from 'react-native';
import { NextScene } from 'react-native';

export default class NavigatorIOSApp extends Component {
  render() {
    return (
      <NavigatorIOS
        initialRoute={{
          component: MyScene,title: '初始化第一个场景',}}
        style={{flex: 1}}
      />
    );
  }
}

class MyScene extends Component {
  static propTypes = {
    title: PropTypes.string.isrequired,navigator: PropTypes.object.isrequired,}

  _onForward = () => {
    this.props.navigator.push({
      component:NextScene
      title: '第二个场景'
    });
  }

  render() {
    return (
      <View>
        <Text>Current Scene: { this.props.title }</Text>
        <TouchableHighlight onPress={this._onForward}>
          <Text>前往下一个场景</Text>
        </TouchableHighlight>
      </View>
    )
  }
}

第二个场景

export default  class NextScene extends Component {

  render() {
    return (
      <View>
        <Text>这是第二个场景</Text>
      </View>
    )
  }
}

React Native 的 Navigator 组件使用方式

React Native的编程思想类似于iOS,导航栏也使用Navigator作为标识,类似于Android的ActionBar. 导航栏作为最重要的应用组件之一,除了处理页面导航功能以外,还会提供页面栈的管理,管理页面的跳入和跳出. 本文介绍一下 Navigator 组件的使用方式.

更多: http://www.wangchenlong.org/

本文源码的GitHub下载地址

欢迎Follow我的GitHub: https://github.com/SpikeKing

关于React Native项目的启动,参考1,参考2.

基本功能

Navigator

添加 Navigator 的组件<Navigator/>. 设置方法: 初始化路由(initialRoute),配置场景动画(configureScene),渲染场景(renderScene). 初始化路由(initialRoute),使用FirstPage页面作为首页.

// 主模块
class SimpleView extends Component {
  // ...
  render() {
    return (
      <Navigator  style={{flex:1}} initialRoute={{component: FirstPage}} configureScene={this.configureScene} renderScene={this.renderScene}/> ); } }

配置场景动画(configureScene): 根据路由的type属性,判断使用的动画样式,底部弹出或右侧弹出.

/** * 配置场景动画 * @param route 路由 * @param routeStack 路由栈 * @returns {*} 动画 */
  configureScene(route,routeStack) {
    if (route.type == 'Bottom') {
      return Navigator.SceneConfigs.FloatFromBottom; // 底部弹出
    }
    return Navigator.SceneConfigs.PushFromright; // 右侧弹出
  }

渲染场景(renderScene): 使用动态加载组件的方式. 设置加载页面的navigator参数,其余使用route.passprops属性传递其他参数.

/** * 使用动态页面加载 * @param route 路由 * @param navigator 导航器 * @returns {XML} 页面 */
  renderScene(route,navigator) {
    return <route.component navigator={navigator} {...route.passprops} />;
  }

也可以使用静态加载组件,需要预定义组件,没有动态加载灵活.

/** * 渲染场景,通过不同参数,设置不同页面 * @param route 路由,场景信息 * @param navigator 导航器 * @returns {XML} 页面 */
  renderScene(route,navigator) {
    if (route.name == 'FirstPage') {
      return <FirstPage navigator={navigator} {...route.passprops}/> } else if (route.name == 'SecondPage') { return <SecondPage navigator={navigator} {...route.passprops}/> } }

第一页

FirstPage组件: 包含导航栏标题和两个跳转按钮. 提供两种跳转动画,右出和底部. 点击按钮调用_navigate()方法,跳转到第二页.

// 第一页. 使用Component可以自动生成注释,符合标准
class FirstPage extends Component {

  // ...

  render() {
    return (
      <View style={styles.container}> <View style={styles.heading}> <Text style={styles.headText}> {'第一页'} </Text> </View> <TouchableOpacity  style={styles.button} onPress={()=>this._navigate('你好! (来源第一页:右出)')}> <Text style={styles.buttonText}> {'跳转至第二页(右出)'} </Text> </TouchableOpacity> <TouchableOpacity  style={styles.button} onPress={()=>this._navigate('你好! (来源第一页:底出)','Bottom')}> <Text style={styles.buttonText}> {'跳转至第二页(底部)'} </Text> </TouchableOpacity> </View> ); } }

也可以使用var FirstPage = React.createClass()创建组件,但没有使用继承Component方式规范,不能自动生成注释.

_navigate()方法: 导航跳转,调用navigator.push()方法. 传递参数passprops的name属性,type动画类型,component跳转组件.

/** * 给Navigator传递参数. * @param name 参数 * @private */
  _navigate(name,type = 'normal') {
    this.props.navigator.push({
      component: SecondPage,passprops: {
        name: name
      },type: type
    })
  }

下划线表示私有方法,类似Java的private限定符.

第二页

SecondPage组件: 第二页,跳出返回第一页. 调用navigator.pop()方法,使用当前页面出栈,显示上一个栈内页面.

// 第二页,点击跳出返回第一页
class SecondPage extends Component {
  render() {
    return (
      <View style={styles.container}> <View style={styles.heading}> <Text style={styles.headText}> 第二页: {this.props.name} </Text> </View> <TouchableOpacity  style={styles.button} onPress={()=>this.props.navigator.pop()}> <Text style={styles.buttonText}> 返回上一页 </Text> </TouchableOpacity> </View> ); } }

Navigator的主要功能,是管理页面栈,控制页面的跳入跳出.

统一导航栏

对于应用而言,需要统一的导航栏,Navigator 组件也提供导航栏的定制.

Navigator

与上文类似,额外添加navigationBar的属性,自定义设置导航栏,保持所有页面的导航栏一致. 属性添加<NavigationBar/>标签,通过routeMapper控制导航栏的功能和样式.

// 主模块
class UniformView extends Component {
  //...

  render() {
    return (
      <Navigator  style={{flex:1}} initialRoute={{name: 'FirstPage',component: FirstPage}} configureScene={this.configureScene} renderScene={this.renderScene} navigationBar={ <Navigator.NavigationBar style={styles.navContainer} routeMapper={NavigationBarRouteMapper}/>} /> ); } }

RouteMapper

NavigationBarRouteMapper: 导航栏路由映射器,设置左键LeftButton,右键RightButton,标题Title.

// 导航栏的Mapper
var NavigationBarRouteMapper = {
  // 左键
  LeftButton(route,navigator,index,navstate) {
    // ...
  },// 右键
  RightButton(route,// 标题
  Title(route,navstate) {
    return (
      <View style={styles.navContainer}> <Text style={styles.title}> 应用标题 </Text> </View> ); } };

左键LeftButton: index属性表示当前页面的索引,通过判断index属性,获知栈内是否有其他页面,判断后退按钮是否显示. 点击调用navigator.pop()出栈.

// 左键
  LeftButton(route,navstate) {
    if (index > 0) {
      return (
        <View style={styles.navContainer}> <TouchableOpacity  underlayColor='transparent' onPress={() => {if (index > 0) {navigator.pop()}}}> <Text style={styles.leftNavButtonText}> 后退 </Text> </TouchableOpacity> </View> ); } else { return null; } },

右键RightButton: 点击调用路由(route)的onPress()方法,提示信息. 根据路由的rightText属性添加显示文字.

// 右键
  RightButton(route,navstate) {
    if (route.onPress)
      return (
        <View style={styles.navContainer}> <TouchableOpacity  onPress={() => route.onPress()}> <Text style={styles.rightNavButtonText}> {route.rightText || '右键'} </Text> </TouchableOpacity> </View> ); },

第一页/第二页

第一页与第二页与上文类似,当第一页跳转时,传递的路由信息有些变化,控制第二页与导航栏的显示信息.

// 填出提示框
  onPress() {
    alert("我是Spike!");
  }

  /** * 跳转页面至SecondPage * @param name 传递参数 * @param type 动画类型 */
  gotoNext(name,passprops: {
        id: name
      },onPress: this.onPress,rightText: 'ALERT!',type: type
    })
  }

React Native 路由的基本功能就是这些,控制页面的切换,控制导航栏的功能. 导航栏作为应用最重要的组件之一,一定要熟练掌握.

OK,that’s all ! Enjoy it!

原始地址:
http://www.wangchenlong.org/2016/04/19/1604/191-rn-navigator/
欢迎Follow我的GitHub,关注我的简书,微博,CSDN,掘金. 我已委托“维权骑士”为我的文章进行维权行动. 未经授权,禁止转载,授权或合作请留言.

React Native中NavigatorIOS组件的简单使用详解

一、NavigatorIOS组件介绍

1，组件说明

使用 NavigatorIOS 我们可以实现应用的导航（路由）功能，即实现视图之间的切换和前进、后退。并且在页面上方会有个导航栏（可以隐藏）。

NavigatorIOS 组件本质上是对 UIKit navigation 的包装。使用 NavigatorIOS 进行路由切换，实际上就是调用 UIKit 的 navigation。

NavigatorIOS 组件只支持 iOS 系统。React Native 还提供了一个 iOS 和 Android 都通用导航组件：Navigator。这个以后再说。

2，组件的属性

（1）barTintColor：导航条的背景颜色
（2）initialRoute：用于初始化路由。其参数对象中的各个属性如下：

{
 component: function, //加载的视图组件
 title: string, //当前视图的标题
 passPros: object, //传递的数据
 backButtonIcon: Image.propTypes.source, // 后退按钮图标
 backButtonTitle: string, //后退按钮标题
 leftButtonIcon: Image.propTypes.soruce, // 左侧按钮图标
 leftButtonTitle: string, //左侧按钮标题
 onLeftButtonPress: function, //左侧按钮点击事件
 rightButtonIcon: Image.propTypes.soruce, // 右侧按钮图标
 rightButtonTitle: string, //右侧按钮标题
 onRightButtonPress: function, //右侧按钮点击事件
 wrapperStyle: [object Object] //包裹样式
}

（3）itemWrapperStyle：为每一项定制样式，比如设置每个页面的背景颜色。
（4）navigationBarHiddent：为 true 时隐藏导航栏。
（5）shadowHidden：为 true 时，隐藏阴影。
（6）tintColor：导航栏上按钮的颜色。
（7）titleTextColor：导航栏上字体的颜色。
（8）translucent：为 true 时，导航栏为半透明。

3，组件的方法

当组件视图切换的时候，navigator 会作为一个属性对象被传递。我们可以通过 this.props.navigator 获得 navigator 对象。该对象的主要方法如下：
（1）pust(route)：加载一个新的页面（视图或者路由）并且路由到该页面。
（2）pop()：返回到上一个页面。
（3）popN(n)：一次性返回N个页面。当 N=1 时，相当于 pop() 方法的效果。
（4）replace(route)：替换当前的路由。
（5）replacePrevious（route）：替换前一个页面的视图并且回退过去。
（6）resetTo(route)：取代最顶层的路由并且回退过去。
（7）popToTop()：回到最上层视图。

二、使用样例

NavigatorIOS是React Native自带的导航组件，下面是它的简单应用。

初始化第一个场景

import PropTypes from ''prop-types'';
import React, { Component } from ''react'';
import { NavigatorIOS, Text } from ''react-native'';
import { NextScene } from ''react-native'';

export default class NavigatorIOSApp extends Component {
 render() {
  return (
   <NavigatorIOS
    initialRoute={{
     component: MyScene,
     title: ''初始化第一个场景'',
    }}
    style={{flex: 1}}
   />
  );
 }
}

class MyScene extends Component {
 static propTypes = {
  title: PropTypes.string.isRequired,
  navigator: PropTypes.object.isRequired,
 }

 _onForward = () => {
  this.props.navigator.push({
   component:NextScene
   title: ''第二个场景''
  });
 }

 render() {
  return (
   <View>
    <Text>Current Scene: { this.props.title }</Text>
    <TouchableHighlight onPress={this._onForward}>
     <Text>前往下一个场景</Text>
    </TouchableHighlight>
   </View>
  )
 }
}

第二个场景

export default class NextScene extends Component {

 render() {
  return (
   <View>
    <Text>这是第二个场景</Text>
   </View>
  )
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

微信小程序间使用navigator跳转传值问题实例分析
DataGridView使用BindingNavigator实现简单分页功能
React Native中Navigator的使用方法示例
react-native组件中NavigatorIOS和ListView结合使用的方法
React-Native中禁用Navigator手势返回的示例代码
react-native-tab-navigator组件的基本使用示例代码
ReactNative页面跳转Navigator实现的示例代码
JavaScript navigator.userAgent获取浏览器信息案例讲解

React Native中NavigatorIOS组件简单使用教程

本文主要介绍了react native中navigatorios组件的简单使用详解,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

一、NavigatorIOS组件介绍

1，组件说明

使用 NavigatorIOS 我们可以实现应用的导航（路由）功能，即实现视图之间的切换和前进、后退。并且在页面上方会有个导航栏（可以隐藏）。

NavigatorIOS 组件本质上是对 UIKit navigation 的包装。使用 NavigatorIOS 进行路由切换，实际上就是调用 UIKit 的 navigation。

NavigatorIOS 组件只支持 iOS 系统。React Native 还提供了一个 iOS 和 Android 都通用导航组件：Navigator。这个以后再说。

2，组件的属性

（1）barTintColor：导航条的背景颜色
（2）initialRoute：用于初始化路由。其参数对象中的各个属性如下：

{
 component: function, //加载的视图组件
 title: string, //当前视图的标题
 passPros: object, //传递的数据
 backButtonIcon: Image.propTypes.source, // 后退按钮图标
 backButtonTitle: string, //后退按钮标题
 leftButtonIcon: Image.propTypes.soruce, // 左侧按钮图标
 leftButtonTitle: string, //左侧按钮标题
 onLeftButtonPress: function, //左侧按钮点击事件
 rightButtonIcon: Image.propTypes.soruce, // 右侧按钮图标
 rightButtonTitle: string, //右侧按钮标题
 onRightButtonPress: function, //右侧按钮点击事件
 wrapperStyle: [object Object] //包裹样式
}

登录后复制

3，组件的方法

二、使用样例

NavigatorIOS是React Native自带的导航组件，下面是它的简单应用。

初始化第一个场景

import PropTypes from &#39;prop-types&#39;;
import React, { Component } from &#39;react&#39;;
import { NavigatorIOS, Text } from &#39;react-native&#39;;
import { NextScene } from &#39;react-native&#39;;

export default class NavigatorIOSApp extends Component {
 render() {
  return (
   <NavigatorIOS
    initialRoute={{
     component: MyScene,
     title: &#39;初始化第一个场景&#39;,
    }}
    style={{flex: 1}}
   />
  );
 }
}

class MyScene extends Component {
 static propTypes = {
  title: PropTypes.string.isRequired,
  navigator: PropTypes.object.isRequired,
 }

 _onForward = () => {
  this.props.navigator.push({
   component:NextScene
   title: &#39;第二个场景&#39;
  });
 }

 render() {
  return (
   <View>
    <Text>Current Scene: { this.props.title }</Text>
    <TouchableHighlight onPress={this._onForward}>
     <Text>前往下一个场景</Text>
    </TouchableHighlight>
   </View>
  )
 }
}

登录后复制

第二个场景

export default class NextScene extends Component {

 render() {
  return (
   <View>
    <Text>这是第二个场景</Text>
   </View>
  )
 }
}

登录后复制

React Native中NavigatorIOS组件的简单使用（react native 组件）