這篇文章主要介紹了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中文網其他相關文章!