RN react-navigation使用

一、命令安裝

npm install react-navigation --save

該庫包含三類組件：

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

（2）TabNavigator：類似底部導覽列，用來在同一屏切換不同頁面

（3）DrawerNavigator：側滑菜單導覽列，用於輕鬆設定帶抽屜的螢幕 二、react-navigation 1、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頁面

2、TabNavigator屬性介紹

screen：和導航的功能是一樣的，對應介面名稱，可以在其他頁面通過這個screen傳值和跳轉。navigationOptions：配置TabNavigator的一些屬性title：標題，會同時設定導航條和標籤欄的titletabBarVisible：是否隱藏標籤欄。預設不隱藏(true)tabBarIcon：設定標籤欄的表徵圖。需要給每個都設定tabBarLabel：設定標籤欄的title。推薦導覽列配置tabBarPosition：設定tabbar的位置，iOS預設在底部，安卓預設在頂部。（屬性值：'top'，'bottom'）swipeEnabled：是否允許在標籤之間進行滑動animationEnabled：是否在更改標籤時顯示動畫lazy：是否根據需要懶惰呈現標籤，而不是提前，意思是在app開啟的時候將底部標籤欄全部載入，預設false,推薦為truetrueinitialRouteName： 設定預設的頁面組件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：是否使標籤大寫，預設為truepressColor：material漣漪效果的顏色（安卓版本需要大於5.0）pressOpacity：按壓標籤的透明度變化（安卓版本需要小於5.0）scrollEnabled：是否啟用可滾動選項卡 tabStyle：tab的樣式indicatorStyle：標籤指標的樣式對象（選項卡底部的行）。安卓底部會多出一條線，可以將height設定為0來暫時解決這個問題labelStyle：label的樣式iconStyle：表徵圖樣式

3、DrawerNavigator屬性介紹

 DrawerNavigatorConfig     drawerWidth - 抽屜的寬度     drawerPosition - 選項是左或右。 預設為左側位置     contentComponent - 用於呈現抽屜內容的組件，例如導航項。 接收抽屜的導航。 預設為DrawerItems     contentOptions - 配置抽屜內容     initialRouteName - 初始路由的routeName     order - 定義抽屜項目順序的routeNames數組。     路徑 - 提供routeName到路徑配置的映射，它覆蓋routeConfigs中設定的路徑。     backBehavior - 後退按鈕是否會切換到初始路由。 如果是，設定為initialRoute，否則為none。 預設為initialRoute行為    DrawerItems的contentOptions屬性     activeTintColor - 活動標籤的標籤和表徵圖顏色     activeBackgroundColor - 活動標籤的背景顏色     inactiveTintColor - 非活動標籤的標籤和表徵圖顏色     inactiveBackgroundColor - 非活動標籤的背景顏色     內容部分的樣式樣式對象     labelStyle - 當您的標籤是字串時，要覆蓋內容部分中的文本樣式的樣式對象

4、使用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全域對象下面，然後在全域裡面尋找調用