React Native之導(dǎo)航組件NavigatorIOS和Navigator

ReactNaive相關(guān)文章

1. React Native 中文網(wǎng)

2. GitHub相關(guān)代碼地址

3. ReactNaive之CSS和Flex布局

4. ReactNative之基本組件

5. React Naive之ScrollView和ListView

6. React Native之導(dǎo)航組件NavigatorIOS和Navigator

7. ReactNative之TabBariOS和TabNavigator

注: 本文主要總結(jié)的是ReactNative的一些簡(jiǎn)單語(yǔ)法, 大部分內(nèi)容總結(jié)自袁大神的文章

Navigator.png

一. NavigatorIOS

• NavigatorIOS是一個(gè)包裝UINavigationController，能夠?qū)崿F(xiàn)一個(gè)導(dǎo)航堆棧, 且只能在iOS上使用的組件
• 它的工作原理與使用本地應(yīng)用程序UINavigationController的效果完全相同，從UIKIt提供相同的動(dòng)畫(huà)和行為

1. 常用屬性

//樣式, 必須設(shè)置{flex:1}, 否則看不到子控件
style={{flex:1}}

//導(dǎo)航條的背景顏色
barTintColor='yellow'

//為true , 隱藏導(dǎo)航欄
navigationBarHidden={false}

//是否隱藏陰影兑徘，true／false。
shadowHidden={false}

//導(dǎo)航欄上按鈕的顏色設(shè)置
tintColor='black'

//導(dǎo)航欄上標(biāo)題的顏色設(shè)置
titleTextColor='blue'

//導(dǎo)航欄是否是半透明的赞警，true／false镊绪。
translucent={true}

2. NavigatorIOS的使用

• 必須初始化路由: initialRoute{}
• 注意:component夹攒，需要傳入組件寒亥，自定義組件

//用于初始化路由邮府。其參數(shù)對(duì)象中的各個(gè)屬性如下：
initialRoute：
 {
  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è)按鈕點(diǎn)擊事件
  rightButtonIcon: Image.propTypes.soruce, // 右側(cè)按鈕圖標(biāo)
  rightButtonTitle: string, //右側(cè)按鈕標(biāo)題
  onRightButtonPress: function, //右側(cè)按鈕點(diǎn)擊事件
}

• 使用示例

<NavigatorIOS initialRoute={
        {
        //JunNavigatorView: 為自定義的組件
            component:JunNavigatorView,
            title: '首頁(yè)',
            leftButtonTitle:'左按鈕',
            rightButtonTitle:'跳轉(zhuǎn)'
        }
    }
/>

3. 頁(yè)面間的跳轉(zhuǎn)

• 獲取Navigator荧关，只有它才能跳轉(zhuǎn)
• 只要是導(dǎo)航控制器下的組件溉奕，都可以通過(guò)props獲取
• this.props.navigator
• 界面跳轉(zhuǎn)方法

pust(route)：//加載一個(gè)新的頁(yè)面（視圖或者路由）并且路由到該頁(yè)面。
pop()：//返回到上一個(gè)頁(yè)面忍啤。
popN(n)：//一次性返回N個(gè)頁(yè)面加勤。當(dāng) N=1 時(shí)，相當(dāng)于 pop() 方法的效果同波。
replace(route)：//替換當(dāng)前的路由鳄梅。
replacePrevious（route）：//替換前一個(gè)頁(yè)面的視圖并且回退過(guò)去。
resetTo(route)：//取代最頂層的路由并且回退過(guò)去未檩。
popToTop()：//回到最上層視圖戴尸。

• 使用示例

    <Text onPress={()=>{
        this.props.navigator.push({
            component:JunTwoView,
            title:'第二頁(yè)面'
        })

    }}
    >點(diǎn)擊跳轉(zhuǎn)到第二個(gè)頁(yè)面</Text>

二. Navigator

• Navigator很好解決了NavigatorIOS不能跨平臺(tái)和自定義的問(wèn)題
• RN開(kāi)發(fā)中通常使用Navigator
• Navigator作用：只提供跳轉(zhuǎn)功能，支持iOS,安卓
• 導(dǎo)航條需要自定義冤狡，需要導(dǎo)航條的界面孙蒙，自己添加
  只要一個(gè)控件项棠，包裝成Navigator就能獲取跳轉(zhuǎn)功能

1. Navigator導(dǎo)入問(wèn)題

• 在0,43版本之前(包括0.43), Navigator在react-native庫(kù)中
• 從0.44版本開(kāi)始Navigator就被移入了react-native-deprecated-custom-components庫(kù)中
• 使用前,先進(jìn)入當(dāng)前項(xiàng)目文件，安裝Navigator所在的庫(kù)

//終端輸入
yarn add react-native-deprecated-custom-components

//下面方法可能已經(jīng)失效(親測(cè)失敗)
npm install react-native-deprecated-custom-components --save

• 下載完成后挎峦，導(dǎo)入

import {Navigator} from 'react-native-deprecated-custom-components'

2. Navigator的使用

2-1. initialRoute： 初始化路由

• 定義啟動(dòng)時(shí)加載的路由
• 路由是導(dǎo)航欄用來(lái)識(shí)別渲染場(chǎng)景的一個(gè)對(duì)象

<Navigator initialRoute={{component: JunOneView}}/>

2-2. 配置場(chǎng)景動(dòng)畫(huà)和手勢(shì)

• 可選的函數(shù), 設(shè)置跳轉(zhuǎn)方向
• 會(huì)帶有兩個(gè)參數(shù)調(diào)用香追，一個(gè)是當(dāng)前的路由，一個(gè)是當(dāng)前的路由棧
• 返回一個(gè)場(chǎng)景配置對(duì)象

_configureScene(route, routeStack) {
    return Navigator.SceneConfigs.PushFromLeft;
}

• 其他跳轉(zhuǎn)方向參數(shù)

Navigator.SceneConfigs.PushFromRight (默認(rèn))
Navigator.SceneConfigs.FloatFromRight
Navigator.SceneConfigs.FloatFromLeft
Navigator.SceneConfigs.FloatFromBottom
Navigator.SceneConfigs.FloatFromBottomAndroid
Navigator.SceneConfigs.FadeAndroid
Navigator.SceneConfigs.HorizontalSwipeJump
Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
Navigator.SceneConfigs.VerticalUpSwipeJump
Navigator.SceneConfigs.VerticalDownSwipeJump

2-3. 渲染指定路由的場(chǎng)景

• 必要參數(shù), 調(diào)用的參數(shù)是路由和導(dǎo)航器

_renderScene(route, navigator) {
        // ...擴(kuò)展符, 作用:如果是對(duì)象,就獲取對(duì)象中所有值,如果是數(shù)組,就獲取數(shù)組中所有值
    return (<route.component navigator={navigator} {... route.props}/>)
}

2-4. 設(shè)置導(dǎo)航尺寸

style={{flex:1}}

3. 其他屬性或方法

onDidFocus function 
//每當(dāng)導(dǎo)航切換完成或初始化之后坦胶，調(diào)用此回調(diào)透典，參數(shù)為新場(chǎng)景的路由。

onWillFocus function 
//會(huì)在導(dǎo)航切換之前調(diào)用顿苇，參數(shù)為目標(biāo)路由峭咒。

三. 延展符

• 文中用到了一個(gè)操作符: ...即為延展符
• 延展符的作用
  • 遍歷數(shù)組
  • 遍歷對(duì)象的屬性,一個(gè)一個(gè)傳值給下一個(gè)控件

var arr1 = [1, 2, 3, 4, 5]
var arr2 = [0]
        
arr2.push(...arr1)
console.log(arr2)
//輸出結(jié)果: [0, 1, 2, 3, 4, 5]

• 作用等同于JavaScript數(shù)組中的concat方法
• 區(qū)別在于concat只能作用于數(shù)組

var arr1 = [1, 2, 3, 4, 5]
var arr2 = [0]

// arr2.push(...arr1)
arr2 = arr2.concat(arr1)
console.log(arr2)
//輸出結(jié)果: [0, 1, 2, 3, 4, 5]

關(guān)于JavaScript的數(shù)組語(yǔ)法, 請(qǐng)查看我的另一篇文章JavaScript基本語(yǔ)法01