這篇文章主要介紹了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>
)
}
}上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
#以上是React Native中NavigatorIOS元件（詳細教學說明）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
