在2017年1月，新開(kāi)源的react-navigation庫(kù)備受矚目。它有類似于原生版性能的體驗(yàn)效果，可能會(huì)成為未來(lái)RN導(dǎo)航組件中的主力軍。該庫(kù)包含三類組件：
（1）StackNavigator：用來(lái)跳轉(zhuǎn)頁(yè)面和傳遞參數(shù)。stack就是數(shù)據(jù)結(jié)構(gòu)的堆棧技術(shù)，遵循后進(jìn)先出的原理。
（2）TabNavigator：類似底部導(dǎo)航欄，用來(lái)在同一屏幕下切換不同界面
（3）DrawerNavigator：側(cè)滑菜單導(dǎo)航欄，用于輕松設(shè)置帶抽屜導(dǎo)航的屏幕

來(lái)朵花花

一、屬性介紹

1.1StackNavigator屬性

• navigationOptions:用于配置StackNavigator的一些屬性。
  • title:標(biāo)題，如果設(shè)置了該屬性，導(dǎo)航欄和標(biāo)簽欄的title就會(huì)變成一樣。故不建議使用
  • header:設(shè)置一些導(dǎo)航的屬性，若想要隱藏頂部導(dǎo)航欄則只需要把這個(gè)屬性設(shè)置為null
  • headerTitle:設(shè)置導(dǎo)航欄標(biāo)題
  • headerBackTitle:設(shè)置跳轉(zhuǎn)頁(yè)面左側(cè)返回箭頭后面的文字，默認(rèn)是上一個(gè)頁(yè)面的標(biāo)題，當(dāng)然也可以自定義設(shè)置設(shè)置成null
  • headerTruncatedBackTitle:設(shè)置當(dāng)上個(gè)頁(yè)面標(biāo)題不符合返回箭頭后的文字時(shí)，默認(rèn)改成"返回"
  • headerRight:設(shè)置導(dǎo)航條右側(cè)。可以是按鈕或者是其他視圖控件
  • headerLeft:設(shè)置導(dǎo)航條右側(cè)?？梢允前粹o或者是其他視圖控件
  • headerStyle:設(shè)置導(dǎo)航條的樣式，背景色及寬高等
  • headerTitleStyle:設(shè)置導(dǎo)航欄文字樣式
  • headerBackTitleStyle:設(shè)置導(dǎo)航欄"返回"的文字樣式
  • headerTintColor:設(shè)置導(dǎo)航欄顏色
  • headerPressColorAndroid:安裝獨(dú)有的設(shè)置顏色紋理。當(dāng)然只有在安卓5.0以上才有效果
  • gesturesEnabled:是否支持滑動(dòng)返回手勢(shì)。iOS默認(rèn)支持，安卓默認(rèn)關(guān)閉
• screen:對(duì)應(yīng)界面名稱，需要填入import之后的頁(yè)面
• mode:定義跳轉(zhuǎn)風(fēng)格
  • card:使用iOS和安卓默認(rèn)的風(fēng)格。直接切換
  • modal:iOS獨(dú)有的使屏幕從底部拖出
• headerMode:返回上級(jí)頁(yè)面時(shí)的動(dòng)畫(huà)效果
  • float:iOS的默認(rèn)效果
  • screen:滑動(dòng)過(guò)程中，整個(gè)頁(yè)面都會(huì)返回
  • none:無(wú)動(dòng)畫(huà)
• cardStyle:自定義設(shè)置跳轉(zhuǎn)效果
  • transitionConfig:自定義設(shè)置滑動(dòng)返回的配置
  • onTransitionStart:當(dāng)轉(zhuǎn)換動(dòng)畫(huà)即將被調(diào)用的功能
  • onTransitionEnd:當(dāng)轉(zhuǎn)換動(dòng)畫(huà)完成時(shí)被調(diào)用的功能
• path:路由中設(shè)置的路徑的覆蓋映射配置。path用于聲明一個(gè)界面路徑
• initialRouteName:設(shè)置默認(rèn)的頁(yè)面組件，必須是已經(jīng)注冊(cè)的頁(yè)面組件
• initailRouteParams:設(shè)置路由參數(shù)

1.2TabNavigator屬性

• screen:和導(dǎo)航的功能一樣，對(duì)應(yīng)界面名稱，可以在氣頭頁(yè)面通過(guò)這個(gè)screen傳值和跳轉(zhuǎn)
• navigationOptions:配置TabNavigator的一些屬性
• title:標(biāo)題，會(huì)同時(shí)設(shè)置導(dǎo)航條和標(biāo)簽欄的title
• tabBarVisible:是否顯示標(biāo)簽欄。默認(rèn)是true不隱藏
• tabBarIcon:設(shè)置標(biāo)簽欄的圖標(biāo)。需要給每一項(xiàng)都設(shè)置
• tabBarLabel:設(shè)置標(biāo)簽欄的title

以下屬性配合導(dǎo)航使用

• tabBarPosition:設(shè)置tabBar的位置，屬性值為top和bottom。iOS默認(rèn)在底部，安卓默認(rèn)在頂部

• swipeEnabled:是否允許在標(biāo)簽之間進(jìn)行滑動(dòng)

• animationEnabled:是否在更改標(biāo)簽時(shí)顯示動(dòng)畫(huà)

• lazy:是否在app打開(kāi)的時(shí)候?qū)⒌撞康臉?biāo)簽欄全部加載，默認(rèn)為flase。推薦打開(kāi)

• trueInitialRouteName:設(shè)置默認(rèn)的頁(yè)面組件

• backBehavior:按back鍵是否跳轉(zhuǎn)到第一個(gè)tab，none為不跳轉(zhuǎn)

• tabBarOptions:設(shè)置標(biāo)簽欄

• 專屬iOS屬性

  • activeTintColor:設(shè)置在活躍狀態(tài)下，label和icon的前景色
  • activeBackgroundColor:label和icon的背景色
  • inactiveTintColor:設(shè)置在不活躍狀態(tài)下，label和icon的前景色
  • inactiveTintColor:設(shè)置在不活躍狀態(tài)下，label和icon的背景色
  • showLabel:是否顯示label，默認(rèn)卡其style:tabbar的樣式
  • labelStyle：label的樣式

• 安卓屬性

  • activeTintColor：label和icon的前景色 活躍狀態(tài)下
  • inactiveTintColor：label和icon的前景色 不活躍狀態(tài)下
  • showIcon：是否顯示圖標(biāo)，默認(rèn)關(guān)閉
  • showLabel：是否顯示label，默認(rèn)開(kāi)啟 style：tabbar的樣式
  • labelStyle：label的樣式 upperCaseLabel：是否使標(biāo)簽大寫(xiě)，默認(rèn)為true
  • pressColor：material漣漪效果的顏色（安卓版本需要大于5.0）
  • pressOpacity：按壓標(biāo)簽的透明度變化（安卓版本需要小于5.0）
  • scrollEnabled：是否啟用可滾動(dòng)選項(xiàng)卡 tabStyle：tab的樣式
  • indicatorStyle：標(biāo)簽指示器的樣式對(duì)象（選項(xiàng)卡底部的行）。安卓底部會(huì)多出一條線，可以將height設(shè)置為0來(lái)暫時(shí)解決這個(gè)問(wèn)題
  • labelStyle：label的樣式
  • iconStyle：圖標(biāo)樣式

1.3DrawerNavigator屬性介紹

• DrawerNavigatorConfig屬性
  • drawerWidth - 抽屜的寬度
  • drawerPosition - 選項(xiàng)是左或右。 默認(rèn)為左側(cè)位置
  • contentComponent - 用于呈現(xiàn)抽屜內(nèi)容的組件，例如導(dǎo)航項(xiàng)。 接收抽屜的導(dǎo)航。 默認(rèn)為DrawerItems
  • contentOptions - 配置抽屜內(nèi)容
  • initialRouteName - 初始路由的routeName
  • order - 定義抽屜項(xiàng)目順序的routeNames數(shù)組。
    路徑 - 提供routeName到路徑配置的映射，它覆蓋routeConfigs中設(shè)置的路徑。
  • backBehavior - 后退按鈕是否會(huì)切換到初始路由？ 如果是，設(shè)置為initialRoute，否則為none。 默認(rèn)為initialRoute行為
  • DrawerItems的contentOptions屬性
  • activeTintColor - 活動(dòng)標(biāo)簽的標(biāo)簽和圖標(biāo)顏色
  • activeBackgroundColor - 活動(dòng)標(biāo)簽的背景顏色
  • inactiveTintColor - 非活動(dòng)標(biāo)簽的標(biāo)簽和圖標(biāo)顏色
  • inactiveBackgroundColor - 非活動(dòng)標(biāo)簽的背景顏色
    內(nèi)容部分的樣式樣式對(duì)象
  • labelStyle - 當(dāng)您的標(biāo)簽是字符串時(shí)，要覆蓋內(nèi)容部分中的文本樣式的樣式對(duì)象

二、案例

2.1StackNavigation案例

• 集成第三方庫(kù)
  使用npm安裝react-navigation庫(kù)，--save表示將該組件寫(xiě)入到package.json文件中。

npm install react-navigation --save

當(dāng)然，也可以采用yarn工具將該庫(kù)添加到項(xiàng)目中

 yarn add react-navigation

• 導(dǎo)入組件到項(xiàng)目中

  本項(xiàng)目創(chuàng)建于0.49.2的環(huán)境中，這次RN對(duì)該版本做了重大改進(jìn)。安卓端和iOS的文件混合成為index.js文件。而文件App.js注冊(cè)到了又注冊(cè)到了index.js文件。故我們將需要用到的代碼編寫(xiě)在App.js文件中。

import {StackNavigator} from 'react-navigation';

• 創(chuàng)建導(dǎo)航，并且添加路由

import HomeScreen from './HomeScreen'; //導(dǎo)入需要展示的頁(yè)面

const  Navigator = StackNavigator(
//設(shè)置導(dǎo)航要展示的頁(yè)面
    {
       HomeScreen:{screen:HomeScreen}   
    },
    //設(shè)置navigationOptions屬性對(duì)象
    {
      navigationOptions: {
        title: '標(biāo)題', //在導(dǎo)航中顯示的標(biāo)題內(nèi)容
        headerBackTitle:null,
        headerTintColor:'#333333',
        showIcon:true,
        swipeEnabled:false,
        animationEnabled:false,
      },
      mode:'card',  //設(shè)置mode屬性
    }
);

• 在render函數(shù)中返回導(dǎo)航

export default class App extends Component<{}> {
  render() {
    return (
       <Navigator/>
    );
  }
}

• HomeScreen.js代碼實(shí)現(xiàn)

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    AppRegistry,
    Text,
    View
} from 'react-native';

export default class HomeScreen extends Component {
    render(){
        return(
            <View style={{flex:1,backgroundColor:'pink'}}>
                <Text>你好啊 在干嘛呢</Text>
            </View>
        );
    }
}

效果圖

下面可以來(lái)做導(dǎo)航的跳轉(zhuǎn)操作
為了實(shí)現(xiàn)跳轉(zhuǎn)操作的功能，需要先新建一個(gè)頁(yè)面，并且將這個(gè)頁(yè)面添加到導(dǎo)航中去。

• 導(dǎo)入頁(yè)面到App.js文件

import ChatScreen from './ChatScreen'  //新建的文件

const  Navigator = StackNavigator(
    {
       HomeScreen:{screen:HomeScreen},
       ChatScreen:{screen:ChatScreen}  //這是新添加的導(dǎo)航界面

• 跳轉(zhuǎn)操作

只要界面加入到了導(dǎo)航當(dāng)中，組件中就會(huì)自動(dòng)添加navigation的navigate屬性。使用該屬性可以跳轉(zhuǎn)到下一個(gè)界面。下面是HomeScreen中的代碼。ChatScreen是第二個(gè)導(dǎo)航界面。在HomeScreen中添加一個(gè)button組件,使用routeName路由名稱ChatScreen關(guān)聯(lián)到組件ChatScreen.

export default class HomeScreen extends Component {

    render(){
        return(
            <View style={{flex:1,backgroundColor:'pink'}}>
                <Text>你好啊 在干嘛呢</Text>
                <Button
                  onPress={()=>this.props.navigation.navigate('ChatScreen')}
                  title={"chat with lucy"}
                />
            </View>
        );
    }
}

• 返回操作

當(dāng)?shù)诙€(gè)界面想要回歸到上一個(gè)界面時(shí)，也要用到navigation的goBack屬性。當(dāng)然導(dǎo)航有自身的返回按鈕。以下代碼是ChatScreen組件的代碼，當(dāng)用戶組件Text也會(huì)返回到上一個(gè)界面。

export default class ChatScreen extends Component {
    static navigationOptions = {
        title: 'Chat with Lucy',
    };
    render() {
        return (
            <View>
                <Text onPress={()=>this.props.navigation.goBack()}>Chat with Lucy</Text>
            </View>
        );
    }
}

效果圖

• 傳遞參數(shù)
  在ChatScreen頁(yè)面中，如果直接寫(xiě)死標(biāo)題則不利于代碼的可維護(hù)性。所以我們可以在導(dǎo)航的時(shí)候傳遞參數(shù)。首先編輯一下HomeScreen組件，傳遞自定義的屬性u(píng)ser參數(shù)到路由中去。

export default class HomeScreen extends Component {
    render(){
        const { navigate } = this.props.navigation;
        return(
            <View style={{flex:1,backgroundColor:'pink'}}>
                <Text>你好啊 在干嘛呢</Text>
                <Button
                  onPress={()=>navigate('ChatScreen',{user:'dudu'})}
                  title={"chat with lucy"}
                />
            </View>
        );
    }
}

之后可以編輯ChatScreen組件顯示的user參數(shù)，這個(gè)參數(shù)通過(guò)route來(lái)傳遞。為了代碼的健壯性，如果外界的user屬性有值，就將user賦值給title。如果沒(méi)有則讓title為空。
設(shè)置導(dǎo)航右邊的菜單，設(shè)置一個(gè)“返回”的文字

static navigationOptions =({ navigation, screenProps }) => ({
    title: navigation.state.params?navigation.state.params.user:null,
    headerRight:(
        <Text onPress={navigation.state.params?navigation.state.params.navigatePress:null}>
            返回
        </Text>
    )
});

• 外界傳值

我們也可以將外界的參數(shù)傳遞給函數(shù)內(nèi)部。下面的代碼采用結(jié)構(gòu)賦值的方法，取出導(dǎo)航中狀態(tài)機(jī)的參數(shù)params，取出參數(shù)中的user，一樣可以拿到外界參數(shù)。

 render() {
        const {params} = this.props.navigation.state;
        return (
            <View>
                <Text onPress={()=>this.props.navigation.goBack()}>Chat with {params.user}</Text>
            </View>
        );
    }

效果圖

2.2 TabNavigator案例

react-navigation組件除了可以用做頁(yè)面間的跳轉(zhuǎn)，當(dāng)然也可以用做tab界面之間的切換。

• 導(dǎo)入react-navigation的子組件。這些組件分別是用于界面切換、跳轉(zhuǎn)、和標(biāo)簽欄外置的擺放。

import {StackNavigator,TabNavigator,TabBarBottom} from 'react-navigation';

• 封裝一個(gè)TabBarItem，用于設(shè)置每個(gè)tab的圖片

import React,{Component} from 'react';
import {Image} from 'react-native';

export default class TabBarItem extends Component {

    render() {
        return(
            <Image source={ this.props.focused ? this.props.selectedImage : this.props.normalImage }
                   style={ { tintColor:this.props.tintColor,width:25,height:25 } }
            />
        )
    }

}

• 導(dǎo)入封裝的TabBarItem組件 表示TabBar的每一項(xiàng)

import TabBarItem from './TabBarItem';

• 定義TabNavigator。定義幾個(gè)要切換的tab，每個(gè)tab設(shè)置好對(duì)應(yīng)要顯示的屏幕。當(dāng)然，從之前介紹的屬性可知，TabNavigator也擁有navigationOptions屬性，它由系統(tǒng)傳入navigation參數(shù)，之后來(lái)設(shè)置其他的子屬性。比如說(shuō)tabBarLabel設(shè)置每個(gè)tab的標(biāo)題，tabBarIcon設(shè)置選中和非選中的圖片。
  之后再設(shè)置其它每個(gè)tab共同的屬性，用一個(gè)對(duì)象表示。

const Tab = TabNavigator({
  Home:{
    screen:HomeScreen,
    navigationOptions:({navigation}) => ({
      tabBarLabel:'首頁(yè)',
      tabBarIcon:({focused,tintColor}) => (
          <TabBarItem
              tintColor={tintColor}
              focused={focused}
              normalImage={require('./imgs/ic_like_sel.png') }
              selectedImage={require('./imgs/ic_mine_sel.png')}
          />
      )
    }),
  },

  Mine:{
    screen:MineScreen,
    navigationOptions:({navigation}) => ({
      tabBarLabel:'我',
      tabBarIcon:({focused,tintColor}) => (
          <TabBarItem
              tintColor={tintColor}
              focused={focused}
              normalImage={require('./imgs/ic_like_sel.png')}
              selectedImage={require('./imgs/ic_like_sel.png')}
          />
      )
    }),
  },
},

    {
      tabBarComponent:TabBarBottom,
      tabBarPosition:'bottom',
      swipeEnabled:false,
      animationEnabled:false,
      lazy:true,
      tabBarOptions:{
        activeTintColor:'#06c1ae',
        inactiveTintColor:'#979797',
        style:{backgroundColor:'#ffffff',},
        labelStyle: {
          fontSize: 20, // 文字大小
        },
      }
});

• 將tab放入到Navigator中

const Navigator = StackNavigator(
    {
        Tab:{screen:Tab},

    },

    {
        navigationOptions:{
            // title:'首頁(yè)',
            headerBackTitle:null,
            headerTintColor:'#333333',
            showIcon:true,
            swipeEnabled:false,
            animationEnabled:false,
        },

        mode:'card',
    });

• 在render方法中返回導(dǎo)航組件

export default class App extends Component<{}> {
  render() {
    return (
     <Navigator/>
    );
  }
}

• HomePage和MinePage的代碼

StackNavigator還提供了onNavigationStateChange回調(diào)方法，用來(lái)監(jiān)聽(tīng)導(dǎo)航狀態(tài)的改變

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View
} from 'react-native';
export default class HomePage extends Component {

    static navigationOptions = {
        title:'首頁(yè)',
    };

    render() {
        return(
            <View style={{flex:1,backgroundColor:'yellow'}}>
                <Text onPress={this._skip.bind(this)}>點(diǎn)擊跳轉(zhuǎn)</Text>
            </View>
        );
    }

    _skip() {
        this.props.navigation.navigate("Mine");
    }
}

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View
} from 'react-native';
export default class MinePage extends Component {

    static navigationOptions = {
        title:'我',
    };

    render() {
        return(
            <View style={{flex:1,backgroundColor:'pink'}}>
                <Text onPress={this._skip.bind(this)}>MinePage</Text>
            </View>
        );
    }

    /**
     * 跳轉(zhuǎn)
     */
    _skip() {
        this.props.navigation.goBack();
    }
}

效果圖

2.3DreawerNavigator抽屜導(dǎo)航

DrawerNavigator是一個(gè)抽屜導(dǎo)航。設(shè)置方式其實(shí)跟設(shè)置Tab差不多。只是需要設(shè)定某些特殊的屬性。比如說(shuō)drawerLabel、drawerIcon、drawerWidth、drawerPosition等等。

• 定義抽屜導(dǎo)航
  HomeScreen與MineScree是導(dǎo)入外界的兩個(gè)界面，將它們定義到DrawerNavigator中。在抽屜導(dǎo)航中，將組件的屬性也一起設(shè)置好。

import {DrawerNavigator} from 'react-navigation';
import HomeScreen from './Pages/HomePage';
import MineScreen from './Pages/MinePage';

const MyApp = DrawerNavigator({
    Home: {
        screen: HomeScreen,
    },
    Mine: {
        screen:MineScreen,
    },
},
    {
        drawerWidth: 200, // 抽屜寬
        drawerPosition: 'left', // 抽屜在左邊還是右邊
        contentOptions: {
            initialRouteName: 'Home', // 默認(rèn)頁(yè)面組件
            activeTintColor: 'white',  // 選中文字顏色
            activeBackgroundColor: '#ff8500', // 選中背景顏色
            inactiveTintColor: '#666',  // 未選中文字顏色
            inactiveBackgroundColor: '#fff', // 未選中背景顏色
            style: {  // 樣式

            }
        }
    }
);

• 在render方法中返回抽屜組件

export default class App extends Component<{}> {
    // static navigationOptions={
    //     title:'app',
    //     gesturesEnabled:false,
    //     header:null,
    // }

    render() {
        return (
            <View style = {{flex:1,marginTop:20,}}>

                <MyApp />
            </View>
        );
    }
}

• 設(shè)置HomePage子頁(yè)面的屬性
  一旦加入了導(dǎo)航組件react-navigation,那么其頁(yè)面就會(huì)有navigationOptions屬性。我們可以在這個(gè)屬性里面設(shè)置抽屜導(dǎo)航的樣式。

export default class HomePage extends Component<{}> {
    static navigationOptions = {
        drawerLabel: 'Home',
        drawerIcon: ({ tintColor }) => (
            <Image
                source={require('.././imgs/ic_like_sel.png')}
                style={[styles.icon, {tintColor: tintColor}]}
            />
        ),
    };
}

• 返回HomePage頁(yè)面要展示的組件
  用navigation的navigate屬性可以跳轉(zhuǎn)到指定的頁(yè)面。如果指定的是DrawerOpen，意思就是打開(kāi)抽屜。

render() {
        return (
            <View>
                <Button
                    onPress={() => this.props.navigation.navigate('Mine')}
                    title="Go to Mine"
                />
                <Button
                    onPress={()=>this.props.navigation.navigate('DrawerOpen')}
                    title="open the draw"
                />
            </View>
        );
    }

• 設(shè)置樣式

const styles = StyleSheet.create({
    icon: {
        width: 24,
        height: 24,
    },
});

• 設(shè)置MinePage頁(yè)面
  MinePage頁(yè)面和HomePage頁(yè)面相差不大。只是做代碼演示而已，這里不再闡述

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
    Button
} from 'react-native';
export default class MineScreen extends Component<{}> {
    static navigationOptions = {
        drawerLabel: 'Mine',
        drawerIcon: ({ tintColor }) => (
            <Image
                source={require('.././imgs/ic_mine_sel.png')}
                style={[styles.icon, {tintColor: tintColor}]}
            />
        ),
    };

    render() {
        return (
            <View>
                <Button
                    onPress={() => this.props.navigation.goBack()}
                    title="Go back home"
                />

                <Button
                    onPress={()=>this.props.navigation.navigate('DrawerOpen')}
                    title="open the draw"
                />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    icon: {
        width: 24,
        height: 24,
    },
});

效果圖如下:

效果圖

非寧?kù)o無(wú)以致遠(yuǎn)，非淡泊無(wú)以明志。在學(xué)習(xí)的道路上，多少會(huì)遇到泥濘挫折。我可以放慢腳步，但絕能不回頭，我的夢(mèng)想，在路上。