RN react-navigation使用

1、命令安裝

npm install react-navigation --save

該庫包含三類組件：

（1）StackNavigator：用來跳轉頁面和傳遞參數

（2）TabNavigator：相似底部導航欄，用來在同一屏切換不一樣頁面

（3）DrawerNavigator：側滑菜單導航欄，用於輕鬆設置帶抽屜的屏幕

2、react-navigation

一、StackNavigator屬性介紹

navigationOptions：配置StackNavigator的一些屬性。

    title：標題，若是設置了這個導航欄和標籤欄的title就會變成同樣的，不推薦使用
    header：能夠設置一些導航的屬性，若是隱藏頂部導航欄只要將這個屬性設置爲null
    headerTitle：設置導航欄標題，推薦
    headerBackTitle：設置跳轉頁面左側返回箭頭後面的文字，默認是上一個頁面的標題。能夠自定義，也能夠設置爲null
    headerTruncatedBackTitle：設置當上個頁面標題不符合返回箭頭後的文字時，默認改爲"返回"
    headerRight：設置導航條右側。能夠是按鈕或者其餘視圖控件
    headerLeft：設置導航條左側。能夠是按鈕或者其餘視圖控件
    headerStyle：設置導航條的樣式。背景色，寬高等
    headerTitleStyle：設置導航欄文字樣式
    headerBackTitleStyle：設置導航欄‘返回’文字樣式
    headerTintColor：設置導航欄顏色
    headerPressColorAndroid：安卓獨有的設置顏色紋理，須要安卓版本大於5.0
    gesturesEnabled：是否支持滑動返回手勢，iOS默認支持，安卓默認關閉
 

screen：對應界面名稱，須要填入import以後的頁面

mode：定義跳轉風格

   card：使用iOS和安卓默認的風格

   modal：iOS獨有的使屏幕從底部畫出。相似iOS的present效果

headerMode：返回上級頁面時動畫效果

   float：iOS默認的效果

   screen：滑動過程當中，整個頁面都會返回

   none：無動畫

cardStyle：自定義設置跳轉效果

   transitionConfig： 自定義設置滑動返回的配置

   onTransitionStart：當轉換動畫即將開始時被調用的功能

   onTransitionEnd：當轉換動畫完成，將被調用的功能

path：路由中設置的路徑的覆蓋映射配置

initialRouteName：設置默認的頁面組件，必須是上面已註冊的頁面組件

initialRouteParams：初始路由參數

StackNavigator(RouteConfigs, StackNavigatorConfig)

// 註冊導航
const Navs = StackNavigator({
    Home: { screen: Tabs },
    HomeTwo: {
        screen: HomeTwo,  // 必須, 其餘都是非必須
        path:'app/homeTwo', 使用url導航時用到, 如 web app 和 Deep Linking
        navigationOptions: {}  // 此處設置了, 會覆蓋組件內的`static navigationOptions`設置. 具體參數詳見下文
    },
    HomeThree: { screen: HomeThree },
    HomeFour: { screen: HomeFour }
}, {
    initialRouteName: 'Home', // 默認顯示界面
    navigationOptions: {  // 屏幕導航的默認選項, 也能夠在組件內用 static navigationOptions 設置(會覆蓋此處的設置)
     headerTitle: "首頁",//導航欄標題
     headerBackTitle: null,//設置跳轉頁面左側返回箭頭後面的文字，默認是上一個頁面的標題。能夠自定義，也能夠設置爲null
     headerTintColor: "#333",//設置導航欄顏色
        cardStack: {
            gesturesEnabled: true//是否容許右滑返回，在iOS上默認爲true，在Android上默認爲false
        }
    }, 
    mode: 'card',  // 頁面切換模式, 左右是card(至關於iOS中的push效果), 上下是modal(至關於iOS中的modal效果)
    headerMode: 'screen', // 導航欄的顯示模式, screen: 有漸變透明效果, float: 無透明效果, none: 隱藏導航欄
    onTransitionStart: ()=>{ console.log('導航欄切換開始'); },  // 頁面切換開始時的回調函數
    onTransitionEnd: ()=>{ console.log('導航欄切換結束'); }  // 頁面切換結束時的回調函數
});

若是在StackNavigatorConfig裏面配置了navigationOptions的一下參數，這些參數會做用與RouteConfigs裏面的全部路由的子頁面，若是路由子頁面裏面設置了static navigationOptions那麼會覆蓋此處配置的全局參數

 

已經配置好導航器以及對應的路由頁面了，可是要完成頁面之間的跳轉，還須要 navigation。

navigation

在導航器中的每個頁面，都有 navigation 屬性，該屬性有如下幾個屬性/方法：

navigate - 跳轉到其餘頁面
state - 當前頁面導航器的狀態
setParams - 更改路由的參數
goBack - 返回
dispatch - 發送一個action

navigete

調用這個方法能夠跳轉到導航器中的其餘頁面，此方法有三個參數：

— routeName 導航器中配置的路由名稱

— params 傳遞參數到下一個頁面

— action action

好比： this.props.navigation.navigate('Find', {param: 'i am the param'});

 

state

state 裏面包含有傳遞過來的參數 params 、 key 、路由名稱 routeName ，打印log能夠看獲得：

{ 
  params: { param: 'i am the param' },
  key: 'id-1500546317301-1',
  routeName: 'Mine' 
}

 

setParams

更改當前頁面路由的參數，好比能夠用來更新頭部的按鈕或者標題。

componentDidMount() {
    this.props.navigation.setParams({param:'i am the new param'})
}

 

goBack

回退，能夠不傳，也能夠傳參數，還能夠傳 null 。

this.props.navigation.goBack();       // 回退到上一個頁面
this.props.navigation.goBack(null);   // 回退到任意一個頁面
this.props.navigation.goBack('Home'); // 回退到Home頁面

 

 

 

二、TabNavigator屬性介紹

screen：和導航的功能是同樣的，對應界面名稱，能夠在其餘頁面經過這個screen傳值和跳轉。


navigationOptions：配置TabNavigator的一些屬性

title：標題，會同時設置導航條和標籤欄的title

tabBarVisible：是否隱藏標籤欄。默認不隱藏(true)

tabBarIcon：設置標籤欄的圖標。須要給每一個都設置

tabBarLabel：設置標籤欄的title。推薦

導航欄配置

tabBarPosition：設置tabbar的位置，iOS默認在底部，安卓默認在頂部。（屬性值：'top'，'bottom'）

swipeEnabled：是否容許在標籤之間進行滑動

animationEnabled：是否在更改標籤時顯示動畫

lazy：是否根據須要懶惰呈現標籤，而不是提早，意思是在app打開的時候將底部標籤欄所有加載，默認false,推薦爲true

trueinitialRouteName： 設置默認的頁面組件

backBehavior：按 back 鍵是否跳轉到第一個Tab(首頁)， none 爲不跳轉

tabBarOptions：配置標籤欄的一些屬性iOS屬性

activeTintColor：label和icon的前景色 活躍狀態下

activeBackgroundColor：label和icon的背景色 活躍狀態下

inactiveTintColor：label和icon的前景色 不活躍狀態下

inactiveBackgroundColor：label和icon的背景色 不活躍狀態下

showLabel：是否顯示label，默認開啓 style：tabbar的樣式

labelStyle：label的樣式安卓屬性

activeTintColor：label和icon的前景色 活躍狀態下

inactiveTintColor：label和icon的前景色 不活躍狀態下

showIcon：是否顯示圖標，默認關閉

showLabel：是否顯示label，默認開啓 style：tabbar的樣式

labelStyle：label的樣式 upperCaseLabel：是否使標籤大寫，默認爲true

pressColor：material漣漪效果的顏色（安卓版本須要大於5.0）

pressOpacity：按壓標籤的透明度變化（安卓版本須要小於5.0）

scrollEnabled：是否啓用可滾動選項卡 tabStyle：tab的樣式

indicatorStyle：標籤指示器的樣式對象（選項卡底部的行）。安卓底部會多出一條線，能夠將height設置爲0來暫時解決這個問題

labelStyle：label的樣式

iconStyle：圖標樣式

三、DrawerNavigator屬性介紹

 DrawerNavigatorConfig

     drawerWidth - 抽屜的寬度
     drawerPosition - 選項是左或右。 默認爲左側位置
     contentComponent - 用於呈現抽屜內容的組件，例如導航項。 接收抽屜的導航。 默認爲DrawerItems
     contentOptions - 配置抽屜內容

     initialRouteName - 初始路由的routeName
     order - 定義抽屜項目順序的routeNames數組。
     路徑 - 提供routeName到路徑配置的映射，它覆蓋routeConfigs中設置的路徑。
     backBehavior - 後退按鈕是否會切換到初始路由？ 若是是，設置爲initialRoute，不然爲none。 默認爲initialRoute行爲

    DrawerItems的contentOptions屬性

     activeTintColor - 活動標籤的標籤和圖標顏色
     activeBackgroundColor - 活動標籤的背景顏色
     inactiveTintColor - 非活動標籤的標籤和圖標顏色
     inactiveBackgroundColor - 非活動標籤的背景顏色
     內容部分的樣式樣式對象
     labelStyle - 當您的標籤是字符串時，要覆蓋內容部分中的文本樣式的樣式對象

 

四、使用StackNavigator + TabNavigator實現Tab界面切換、界面間導航

1>首先導入必要組件（包含導航路由）

import { StackNavigator, TabNavigator, TabBarBottom } from "react-navigation";
import Home from "./category/Home";
import Feedback from "./category/feedback/feedback";
import Task from "./category/task/taskHome";

2>定義TabNavigator

const MyTab = TabNavigator(
    {
        Home: {
            screen: Home,
            navigationOptions: ({ navigation }) => ({
                headerTitle: "首頁",
                tabBarLabel: "首頁",
                headerBackTitle: null,
                tabBarIcon: ({ tintColor }) => (
                    <Image
                        style={styles.imageStyle}
                        source={
                            tintColor == "#ff552e"
                                ? require("./img/yingxiao/ac-jingxuan.png")
                                : require("./img/yingxiao/jingxuan.png")
                        }
                    />
                )
            })
        },
        Feed: {
            screen: Feedback,
            navigationOptions: ({ navigation }) => ({
                headerTitle: "意見反饋",
                tabBarLabel: "個人",
                headerBackTitle: null,
                headerRight: (
                    <Text
                        style={{ color: "#333", marginRight: 14, fontSize: 16 }}
                        onPress={() =>
                            navigation.state.params ? navigation.state.params.submit() : null
                        }>
                        提交
                    </Text>
                ),
                tabBarIcon: ({ tintColor }) => (
                    <Image
                        style={styles.imageStyle}
                        source={
                            tintColor == "#ff552e"
                                ? require("./img/yingxiao/ac-laidiantong.png")
                                : require("./img/yingxiao/laidiantong.png")
                        }
                    />
                )
            })
        }
    },
    {
        tabBarComponent: TabBarBottom,
        tabBarPosition: "bottom", //設置tabbar的位置，iOS默認在底部，安卓默認在頂部。（屬性值：'top'，'bottom'）
        swipeEnabled: true, //是否容許在標籤之間滑動
        animationEnabled: false, //是否在更改標籤時顯示動畫
        lazy: true, //是否根據須要懶惰呈現標籤，而不是提早製做，意思是在app打開的時候將底部標籤欄所有加載，默認false,推薦改爲true
        tabBarOptions: {
            activeTintColor: "#ff552e", //label和icon的前景色 活躍狀態下（選中）
            // activeBackgroundColor:'blue',//label和icon的背景色 活躍狀態下
            inactiveTintColor: "#333", //label和icon的前景色 不活躍狀態下
            showLabel: true, //是否顯示label，默認開啓
            showIcon: true, // android 默認不顯示 icon, 須要設置爲 true 纔會顯示
            style: { backgroundColor: "#ffffff" }, //tabbar的樣式
            labelStyle: {
                fontSize: 14 // 文字大小
            }
        }
    }
);

3>定義StackNavigator

 

效果圖：

const AppIndex = StackNavigator({
    Main: {
        screen: MyTab
    },    
Task: {
        screen: Task,
        navigationOptions: {
            headerBackTitle: null
        }
    }
});

 

 

任務系統導航跳轉到任務首頁：

 

難點：導航右側配置按鈕：

 

headerRight：設置導航條右側。能夠是按鈕或者其餘視圖控件

使用react-navigation時,單頁面設置navigationOptions中,進行Static中調用方法,不能像如下設置

onPress = {()=>this.share()}

static navigationOptions = ({ navigation }) => ({
        title: `${navigation.state.params.title}`,
        headerBackTitle: `${navigation.state.params.title}`,
        headerRight: (
            <View style={{ flexDirection: "row" }}>
                <Text
                    style={{ color: "#333", marginRight: 13 }}
                    // static裏面不能使用this調用方法,出現share is not function
                    onPress={()=>this.share()
                    }>
                    分享
                </Text>
                
            </View>
        )
    });

解決辦法：

//右側配置兩個按鈕
static navigationOptions = ({ navigation }) => ({
        title: `${navigation.state.params.title}`,
        headerBackTitle: `${navigation.state.params.title}`,
        headerRight: (
            <View style={{ flexDirection: "row" }}>
                <Text
                    style={{ color: "#333", marginRight: 13 }}
                    onPress={() =>
                        navigation.state.params ? navigation.state.params.share() : null
                    }>
                    分享
                </Text>
                <Text
                    style={{ color: "#333", marginRight: 13 }}
                    onPress={() =>
                        navigation.state.params ? navigation.state.params.jumpToRule() : null
                    }>
                    兌換規則
                </Text>
            </View>
        )
    });

例如分享：

首先在本類中聲明一個share(){

}的方法

頁面掛載完成在componentDidMount裏面設置navigation的setParams把方法注入到navigation中去

componentDidMount() {
        // 經過在componentDidMount裏面設置setParams
        this.props.navigation.setParams({
            share: this.share
        });
    }

而後點擊時直接在navigation中尋找剛剛注入的放置直接調用

onPress={() =>
                        navigation.state.params ? navigation.state.params.share() : null
                    }

本人開發中最初的處理方式：

把導航裏面配置的按鈕須要調用的本類函數放到window全局對象下面，而後在全局裏面尋找調用