React Native中NavigatorIOS組件的簡單使用詳解，reactnavigatorios

React Native中NavigatorIOS組件的簡單使用詳解，reactnavigatorios

一、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>  ) }}

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。