欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2018年01月27日 10:36:04   作者:王二追隨者  
這篇文章主要介紹了React Native中NavigatorIOS組件的簡單使用詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

一、NavigatorIOS組件介紹

1,組件說明

使用 NavigatorIOS 我們可以實現(xiàn)應(yīng)用的導(dǎo)航(路由)功能,即實現(xiàn)視圖之間的切換和前進、后退。并且在頁面上方會有個導(dǎo)航欄(可以隱藏)。

NavigatorIOS 組件本質(zhì)上是對 UIKit navigation 的包裝。使用 NavigatorIOS 進行路由切換,實際上就是調(diào)用 UIKit 的 navigation。

NavigatorIOS 組件只支持 iOS 系統(tǒng)。React Native 還提供了一個 iOS 和 Android 都通用導(dǎo)航組件:Navigator。這個以后再說。

2,組件的屬性

(1)barTintColor:導(dǎo)航條的背景顏色
(2)initialRoute:用于初始化路由。其參數(shù)對象中的各個屬性如下:

{
 component: function, //加載的視圖組件
 title: string, //當(dāng)前視圖的標(biāo)題
 passPros: object, //傳遞的數(shù)據(jù)
 backButtonIcon: Image.propTypes.source, // 后退按鈕圖標(biāo)
 backButtonTitle: string, //后退按鈕標(biāo)題
 leftButtonIcon: Image.propTypes.soruce, // 左側(cè)按鈕圖標(biāo)
 leftButtonTitle: string, //左側(cè)按鈕標(biāo)題
 onLeftButtonPress: function, //左側(cè)按鈕點擊事件
 rightButtonIcon: Image.propTypes.soruce, // 右側(cè)按鈕圖標(biāo)
 rightButtonTitle: string, //右側(cè)按鈕標(biāo)題
 onRightButtonPress: function, //右側(cè)按鈕點擊事件
 wrapperStyle: [object Object] //包裹樣式
}

(3)itemWrapperStyle:為每一項定制樣式,比如設(shè)置每個頁面的背景顏色。
(4)navigationBarHiddent:為 true 時隱藏導(dǎo)航欄。
(5)shadowHidden:為 true 時,隱藏陰影。
(6)tintColor:導(dǎo)航欄上按鈕的顏色。
(7)titleTextColor:導(dǎo)航欄上字體的顏色。
(8)translucent:為 true 時,導(dǎo)航欄為半透明。

3,組件的方法

當(dāng)組件視圖切換的時候,navigator 會作為一個屬性對象被傳遞。我們可以通過 this.props.navigator 獲得 navigator 對象。該對象的主要方法如下:
(1)pust(route):加載一個新的頁面(視圖或者路由)并且路由到該頁面。
(2)pop():返回到上一個頁面。
(3)popN(n):一次性返回N個頁面。當(dāng) N=1 時,相當(dāng)于 pop() 方法的效果。
(4)replace(route):替換當(dāng)前的路由。
(5)replacePrevious(route):替換前一個頁面的視圖并且回退過去。
(6)resetTo(route):取代最頂層的路由并且回退過去。
(7)popToTop():回到最上層視圖。

二、使用樣例

NavigatorIOS是React Native自帶的導(dǎo)航組件,下面是它的簡單應(yīng)用。

初始化第一個場景

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)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • React實現(xiàn)路由鑒權(quán)的實例詳解

    React實現(xiàn)路由鑒權(quán)的實例詳解

    React應(yīng)用中的路由鑒權(quán)是確保用戶僅能訪問其授權(quán)頁面的方式,用于已登錄或具有訪問特定頁面所需的權(quán)限,這篇文章就來記錄下React實現(xiàn)路由鑒權(quán)的流程,需要的朋友可以參考下
    2024-07-07
  • react-native消息推送實現(xiàn)方式

    react-native消息推送實現(xiàn)方式

    這篇文章主要介紹了react-native消息推送實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-02-02
  • react字符串匹配關(guān)鍵字高亮問題

    react字符串匹配關(guān)鍵字高亮問題

    這篇文章主要介紹了react字符串匹配關(guān)鍵字高亮問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • 前端 react 實現(xiàn)圖片上傳前壓縮(縮率圖)

    前端 react 實現(xiàn)圖片上傳前壓縮(縮率圖)

    這篇文章主要介紹了前端 react 實現(xiàn)圖片上傳前壓縮(縮率圖),本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
    2024-08-08
  • 可定制React自動完成搜索組件Turnstone實現(xiàn)示例

    可定制React自動完成搜索組件Turnstone實現(xiàn)示例

    這篇文章主要為大家介紹了可定制React自動完成搜索組件Turnstone實現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-10-10
  • React 組件中的state和setState()你知道多少

    React 組件中的state和setState()你知道多少

    這篇文章主要為大家詳細(xì)介紹了React組件中的state和setState(),文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-03-03
  • react中使用antd及immutable示例詳解

    react中使用antd及immutable示例詳解

    這篇文章主要為大家介紹了react中使用antd及immutable示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-08-08
  • react 移動端實現(xiàn)列表左滑刪除的示例代碼

    react 移動端實現(xiàn)列表左滑刪除的示例代碼

    這篇文章主要介紹了react 移動端實現(xiàn)列表左滑刪除的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-07-07
  • React-Router(V6)的權(quán)限控制實現(xiàn)示例

    React-Router(V6)的權(quán)限控制實現(xiàn)示例

    本文主要介紹了React-Router(V6)的權(quán)限控制實現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-05-05
  • React中useEffect Hook常見問題及解決

    React中useEffect Hook常見問題及解決

    React的useEffect Hook它允許我們在函數(shù)組件中執(zhí)行副作用操作,但在使用過程中可能會遇到一些常見的錯誤,本文就來介紹一下常見問題及解決,感興趣的可以了解一下
    2023-10-10

最新評論