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

來朵花花

一、屬性介紹

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)頁面左側(cè)返回箭頭后面的文字，默認(rèn)是上一個(gè)頁面的標(biāo)題，當(dāng)然也可以自定義設(shè)置設(shè)置成null
- headerTruncatedBackTitle:設(shè)置當(dāng)上個(gè)頁面標(biāo)題不符合返回箭頭后的文字時(shí)，默認(rèn)改成"返回"
- headerRight:設(shè)置導(dǎo)航條右側(cè)?？梢允前粹o或者是其他視圖控件
- 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之后的頁面
mode:定義跳轉(zhuǎn)風(fēng)格
- card:使用iOS和安卓默認(rèn)的風(fēng)格。直接切換
- modal:iOS獨(dú)有的使屏幕從底部拖出
headerMode:返回上級(jí)頁面時(shí)的動(dòng)畫效果
- float:iOS的默認(rèn)效果
- screen:滑動(dòng)過程中，整個(gè)頁面都會(huì)返回
- none:無動(dòng)畫
cardStyle:自定義設(shè)置跳轉(zhuǎn)效果
- transitionConfig:自定義設(shè)置滑動(dòng)返回的配置
- onTransitionStart:當(dāng)轉(zhuǎn)換動(dòng)畫即將被調(diào)用的功能
- onTransitionEnd:當(dāng)轉(zhuǎn)換動(dòng)畫完成時(shí)被調(diào)用的功能
path:路由中設(shè)置的路徑的覆蓋映射配置。path用于聲明一個(gè)界面路徑
initialRouteName:設(shè)置默認(rèn)的頁面組件，必須是已經(jīng)注冊(cè)的頁面組件
initailRouteParams:設(shè)置路由參數(shù)

1.2TabNavigator屬性

screen:和導(dǎo)航的功能一樣，對(duì)應(yīng)界面名稱，可以在氣頭頁面通過這個(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)畫
lazy:是否在app打開的時(shí)候?qū)⒌撞康臉?biāo)簽欄全部加載，默認(rèn)為flase。推薦打開
trueInitialRouteName:設(shè)置默認(rèn)的頁面組件
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)開啟 style：tabbar的樣式
- labelStyle：label的樣式 upperCaseLabel：是否使標(biāo)簽大寫，默認(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來暫時(shí)解決這個(gè)問題
- 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案例

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

npm install react-navigation --save

當(dāng)然，也可以采用yarn工具將該庫添加到項(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文件。故我們將需要用到的代碼編寫在App.js文件中。

import {StackNavigator} from 'react-navigation';

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

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

const  Navigator = StackNavigator(
//設(shè)置導(dǎo)航要展示的頁面
    {
       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>
        );
    }
}

效果圖

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

導(dǎo)入頁面到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頁面中，如果直接寫死標(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ù)通過route來傳遞。為了代碼的健壯性，如果外界的user屬性有值，就將user賦值給title。如果沒有則讓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組件除了可以用做頁面間的跳轉(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ù)，之后來設(shè)置其他的子屬性。比如說tabBarLabel設(shè)置每個(gè)tab的標(biāo)題，tabBarIcon設(shè)置選中和非選中的圖片。
之后再設(shè)置其它每個(gè)tab共同的屬性，用一個(gè)對(duì)象表示。

const Tab = TabNavigator({
  Home:{
    screen:HomeScreen,
    navigationOptions:({navigation}) => ({
      tabBarLabel:'首頁',
      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:'首頁',
            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)方法，用來監(jiān)聽導(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:'首頁',
    };

    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è)定某些特殊的屬性。比如說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)頁面組件
            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子頁面的屬性
一旦加入了導(dǎo)航組件react-navigation,那么其頁面就會(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頁面要展示的組件
用navigation的navigate屬性可以跳轉(zhuǎn)到指定的頁面。如果指定的是DrawerOpen，意思就是打開抽屜。

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頁面
MinePage頁面和HomePage頁面相差不大。只是做代碼演示而已，這里不再闡述

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,
    },
});

效果圖如下:

效果圖

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

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

react-navigation，刷新你的導(dǎo)航

react-navigation，刷新你的導(dǎo)航

一、屬性介紹

1.1StackNavigator屬性

1.2TabNavigator屬性

1.3DrawerNavigator屬性介紹

二、案例

2.1StackNavigation案例

2.2 TabNavigator案例

2.3DreawerNavigator抽屜導(dǎo)航

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

react-navigation，刷新你的導(dǎo)航

一、屬性介紹

1.1StackNavigator屬性

1.2TabNavigator屬性

1.3DrawerNavigator屬性介紹

二、案例

2.1StackNavigation案例

2.2 TabNavigator案例

2.3DreawerNavigator抽屜導(dǎo)航

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

一、屬性介紹

二、案例