前言

眼看很多公司都開(kāi)始嘗試使用ReactNative,達(dá)到跨平臺(tái)開(kāi)發(fā)，最近也寫(xiě)了很多文章，希望讓更多想了解的同學(xué)快速上手ReactNative.

如果喜歡我的文章，可以關(guān)注我微博:袁崢Seemygo

NavigatorIOS組件

• 什么是導(dǎo)航，本質(zhì)就是視圖之間界面的跳轉(zhuǎn)，比如首頁(yè)跳轉(zhuǎn)到詳情頁(yè)。
• NavigatorIOS作用：用來(lái)iOS上界面之間的跳轉(zhuǎn)。

常用屬性

barTintColor : 導(dǎo)航條的背景顏色
navigationBarHidden : 為true , 隱藏導(dǎo)航欄。
shadowHidden : 是否隱藏陰影，true／false。
tintColor : 導(dǎo)航欄上按鈕的顏色設(shè)置。
titleTextColor : 導(dǎo)航欄上字體的顏色 。
translucent : 導(dǎo)航欄是否是半透明的，true／false。

NavigatorIOS使用步驟

• 1.初始化路由
  • 注意:component，需要傳入組件，自定義組件
  • NavigatorIOS上的按鈕圖片，默認(rèn)會(huì)被渲染成藍(lán)色
  • NavigatorIOS上的按鈕，只能放一張圖片
  • 注意：導(dǎo)航一定要有尺寸，flex:1，否則看不到子控件

initialRoute：用于初始化路由。其參數(shù)對(duì)象中的各個(gè)屬性如下：
 {
  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
                style={{flex:1,backgroundColor:'blue'}}
                initialRoute={{
                    component: HomeView,
                    title: '首頁(yè)',
                    leftButtonIcon:{uri'navigationbar_friendattention'},
                }}
            />

• 2.獲取Navigator，只有它才能跳轉(zhuǎn)
  • 只要是導(dǎo)航控制器下的組件，都可以通過(guò)props獲取

this.props.navigator

• 3.跳轉(zhuǎn)界面

• 方法

（1）pust(route)：加載一個(gè)新的頁(yè)面（視圖或者路由）并且路由到該頁(yè)面。
（2）pop()：返回到上一個(gè)頁(yè)面。
（3）popN(n)：一次性返回N個(gè)頁(yè)面。當(dāng) N=1 時(shí)，相當(dāng)于 pop() 方法的效果。
（4）replace(route)：替換當(dāng)前的路由。
（5）replacePrevious（route）：替換前一個(gè)頁(yè)面的視圖并且回退過(guò)去。
（6）resetTo(route)：取代最頂層的路由并且回退過(guò)去。
（7）popToTop()：回到最上層視圖。

• 使用

  this.props.navigator.push({
        component:nextView,
        title:'第二頁(yè)',
        passProps:{name:'xmg'},
    }

Navigator

• NavigatorIOS弊端：

  • 1.只能用于iOS,不能用于安卓
  • 2.導(dǎo)航條不能自定義

• Navigator很好解決了上面的問(wèn)題,RN開(kāi)發(fā)中通常使用它

• Navigator作用：只提供跳轉(zhuǎn)功能，支持iOS,安卓

  • 注意：導(dǎo)航條需要自定義，需要導(dǎo)航條的界面，自己添加
  • 只要一個(gè)控件，包裝成Navigator就能獲取跳轉(zhuǎn)功能

Navigator導(dǎo)入

• 在之前的版本可以直接導(dǎo)入

import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    Navigator

} from 'react-native';

• 但是最近的版本不行，Navigator被移入另外一個(gè)庫(kù)了
• 直接導(dǎo)入，會(huì)報(bào)錯(cuò)

error.jpeg

• 解決,進(jìn)入當(dāng)前項(xiàng)目文件，安裝Navigator所在的庫(kù)

npm install react-native-deprecated-custom-components --save

• 安裝好后，就能看到Navigator了

Navigator.jpeg

• 項(xiàng)目直接導(dǎo)入就行

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

Navigator使用步驟

1.創(chuàng)建Navigator

    render() {
        return (
            <Navigator
                initialRoute={{component:HomeView}}
                configureScene={this._configureScene.bind(this)}
                renderScene={this._renderScene.bind(this)}
                style={{flex:1}}
            />

        )

    }

    // 配置場(chǎng)景跳轉(zhuǎn)方向
    _configureScene(route, routeStack) {
        return Navigator.SceneConfigs.PushFromLeft;
    }

    // 生成組件,變量要用{}包住
    _renderScene(route, navigator) {

        
        // 把導(dǎo)航控制器傳遞給HomeView
        // ...route: 獲取route中所有屬性,傳遞給HomeView
        // ...擴(kuò)展符, 作用:如果是對(duì)象,就獲取對(duì)象中所有值,如果是數(shù)組,就獲取數(shù)組中所有值
        // <route.component navigator={navigator} {...route}/> 類似下面寫(xiě)法，把route的屬性取出來(lái)賦值
        // <route.component navigator={navigator} component=route.component/>
        return (<route.component navigator={navigator} {...route}/>)
    }

• 1.初始化路由: initialRoute
  • 設(shè)置初始化界面屬性，描述一開(kāi)始顯示哪個(gè)組件

    initialRoute={{component:HomeView}}

• 2.配置場(chǎng)景: configureScene(route, routeStack)
  • 設(shè)置跳轉(zhuǎn)方向

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

• 3.渲染場(chǎng)景: renderScene(route, navigator)
  • 根據(jù)路由，生成組件

    // 生成組件,變量要用{}包住
    _renderScene(route, navigator) {

        // 類似<HomeView navigator={navigator} {...route.props}/>
        // 把導(dǎo)航控制器傳遞給HomeView
        // ...route.props: 獲取route中所有屬性,傳遞給HomeView
        // ...擴(kuò)展符, 作用:如果是對(duì)象,就獲取對(duì)象中所有值,如果是數(shù)組,就獲取數(shù)組中所有值
        return (<route.component navigator={navigator} {... route.props}/>)
    }

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

style={{flex:1}}

2.跳轉(zhuǎn)界面

this.props.navigator.push({
                        component:nextView,
                        title:'首頁(yè)',
                        passProps:{name:'xmg'},

                    }