返回 导航

React / React Native

hangge.com

React Native - 导航组件（NavigatorIOS）的使用详解

作者：hangge | 2017-02-07 08:10

一、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()：回到最上层视图。

二、使用样例

1，效果图

（1）程序启动后首先加载显示文章列表。
（2）点击任意一篇文章，进入到详情页面。
（3）在详情页的导航栏右侧还添加了个收藏按钮，点击后会触发相应事件。
         

2，样例代码

这里我们一个创建了3个组件。
  • List 组件：实现文章列表页。
  • Detail 组件：实现详情页。
  • NV 组件：加载 NavigatorIOS 并作为程序入口。其初始化路由默认配置为 List 组件。
 import React, { Component } from 'react';
 import {
  AppRegistry,
  StyleSheet,
  NavigatorIOS,
  Text,
  View,
  ScrollView,
 } from 'react-native';

 class List extends Component {
    render() {
      return (
        <ScrollView style={styles.flex}>
          <View style={styles.list_item}>
            <Text style={styles.list_item_font} onPress={this.goTo.bind(this)}>
              Swift - 滑块（UISlider）的用法
            </Text>
          </View>
          <View style={styles.list_item}>
            <Text style={styles.list_item_font} onPress={this.goTo.bind(this)}>
              Swift - 告警框（UIAlertView）的用法
            </Text>
          </View>
          <View style={styles.list_item}>
            <Text style={styles.list_item_font} onPress={this.goTo.bind(this)}>
              Swift - 选择框（UIPickerView）的用法
            </Text>
          </View>
        </ScrollView>
      );
    }
    goTo(){
      this.props.navigator.push({
        component: Detail,
        title: '详情',
        rightButtonTitle: '收藏',
        onRightButtonPress: function(){
          alert('点击了收藏按钮。');
        }
      });
    }
  }

  class Detail extends Component {
    render() {
      return (
        <ScrollView>
          <Text>这个是详情页。欢迎访问hangge.com</Text>
        </ScrollView>
      );
    }
  }

  class NV extends Component {
    render() {
      return(
        <NavigatorIOS
          style={{flex:1}}
          initialRoute={{
            component: List,
            title: '列表',
            passProps: {},
          }}
        />
      );
    }
  }

  const styles = StyleSheet.create({
    flex:{
      flex: 1,
    },
    list_item:{
      height:40,
      marginLeft:10,
      marginRight:10,
      borderBottomWidth:1,
      borderBottomColor: '#ddd',
      justifyContent: 'center'
    },
    list_item_font:{
      fontSize:16
    },
  });

  AppRegistry.registerComponent('HelloWorld', () => NV);
评论

全部评论（3）

回到顶部