React Native中NavigatorIOS組件的簡單使用詳解
一、NavigatorIOS組件介紹
1,組件說明
使用 NavigatorIOS 我們可以實現(xiàn)應用的導航(路由)功能,即實現(xiàn)視圖之間的切換和前進、后退。并且在頁面上方會有個導航欄(可以隱藏)。
NavigatorIOS 組件本質(zhì)上是對 UIKit navigation 的包裝。使用 NavigatorIOS 進行路由切換,實際上就是調(diào)用 UIKit 的 navigation。
NavigatorIOS 組件只支持 iOS 系統(tǒng)。React Native 還提供了一個 iOS 和 Android 都通用導航組件:Navigator。這個以后再說。
2,組件的屬性
(1)barTintColor:導航條的背景顏色
(2)initialRoute:用于初始化路由。其參數(shù)對象中的各個屬性如下:
{ component: function, //加載的視圖組件 title: string, //當前視圖的標題 passPros: object, //傳遞的數(shù)據(jù) backButtonIcon: Image.propTypes.source, // 后退按鈕圖標 backButtonTitle: string, //后退按鈕標題 leftButtonIcon: Image.propTypes.soruce, // 左側(cè)按鈕圖標 leftButtonTitle: string, //左側(cè)按鈕標題 onLeftButtonPress: function, //左側(cè)按鈕點擊事件 rightButtonIcon: Image.propTypes.soruce, // 右側(cè)按鈕圖標 rightButtonTitle: string, //右側(cè)按鈕標題 onRightButtonPress: function, //右側(cè)按鈕點擊事件 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> ) } }
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
可定制React自動完成搜索組件Turnstone實現(xiàn)示例
這篇文章主要為大家介紹了可定制React自動完成搜索組件Turnstone實現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-10-10React 組件中的state和setState()你知道多少
這篇文章主要為大家詳細介紹了React組件中的state和setState(),文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-03-03React-Router(V6)的權(quán)限控制實現(xiàn)示例
本文主要介紹了React-Router(V6)的權(quán)限控制實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-05-05