React Native專案中，跳轉頁面之前用的是Navigator，Navigator已經被React Native廢棄，官方推薦的是react-navigation來替代Navigator，使用react-navigation的導航元件可以讓頁面跳轉的實現更加簡潔。

一、react-navigation包括下面三個Navigator：

• StackNavigator: 這個元件是用來代替之前的Navigator的。凡是維持一種“先進後廚”的棧式導航的話就可以用這個。
• TabNavigator：這個元件和iOS的`TabBarController。看起來是這樣的。
• DrawerNavigator：這個元件就是抽屜式的導航選單。在React Native裡只有Android才有DrawerLayoutAndroid，在iOS裡是沒有的。有了DrawerNavigator，兩個平臺都可以用了。

二、StackNavigator元件使用示例。

1、專案整合react-navigation

在專案根目錄下，執行：npm install react-navigation --save

2、在App.js元件中

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

export default class App extends Component<Props> {
    constructor(props) {
        super(props);
    }

  render() {
    return (
        <Navigator />
    )
  }
}

const StackRouteConfigs = {
    Tab: {
        screen: Tab,
    },
    Msg:{
        screen: MsgScene
    }
};
const StackNavigatorConfigs = {  // 表示導航器的配置，包括導航器的初始頁面、各個頁面之間導航的動畫、頁面的配置選項等等
    initialRouteName: 'Tab',
    navigationOptions: {
        title: '預設標題欄',
        headerStyle: {backgroundColor: color.primary},  // 設定導航頭部樣式
        headerTitleStyle: {color: '#333333'},  // 設定導航頭部標題樣式
        // headerTintColor: '#333333',
         showIcon: true,
    }
};
// StackNavigator 導航元件，用來實現各個介面跳轉
const Navigator = StackNavigator(StackRouteConfigs, StackNavigatorConfigs);
 

3、Tab .js的跳轉邏輯

	export default class Tab extends Component{
    //UI渲染
    render() {
        return(
            <View style={styles.container}>
                {/*<BackHeader style={styles.title} title="帶back的標題欄" showBack={true} />*/}
                <TouchableWithoutFeedback
                    onPress={()=> {
                        this.props.navigation.navigate('Msg', { deviceId: '10010' })
                    }}>
                    <View style={styles.content}>
                        {/*!//跳轉到訊息頁面*/}
                        <Text style={styles.text}>我的,,點選可以跳轉</Text>
                    </View>
                </TouchableWithoutFeedback>

            </View>
        );
    }
}
 

4、跳轉到MsgScene.js

export default class MsgScene extends Component{
    //UI渲染
    render() {
        const { params } = this.props.navigation.state;
        //return不帶（）會報錯
        return(
            <View style={styles.container}>
                <TouchableOpacity
                    //被按下時，文字的不透明度
                    activeOpacity={0.2}
                    onPress={()=> {
                        /*//返回上個頁面*/
                        this.props.navigation.goBack()
                    }}>

                    <View style={styles.content}>
                        <Text style={styles.text}>我是{params.deviceId}裝置的訊息頁面,,點選可以跳轉回去</Text>
                    </View>

                </TouchableOpacity>
            </View>
        );
    }
}

三、實現效果

由Tab .js頁面跳轉到Msgcene.js頁面，並傳遞引數10010，在Msgcene.js頁面接受裝置id引數，點選back可以跳轉回去。

四、react-navigation跳轉總結

3、引數

navigationOptions為對應路由頁面的配置選項：

title - 可以作為頭部標題 headerTitle ，或者Tab標題 tabBarLabel
header - 自定義的頭部元件，使用該屬性後系統的頭部元件會消失
headerTitle - 頭部的標題，即頁面的標題
headerBackTitle - 返回標題，預設為 title
headerTruncatedBackTitle - 返回標題不能顯示時（比如返回標題太長了）顯示此標題，預設為 “Back”
headerRight - 頭部右邊元件
headerLeft - 頭部左邊元件
headerStyle - 頭部元件的樣式
headerTitleStyle - 頭部標題的樣式
headerBackTitleStyle - 頭部返回標題的樣式
headerTintColor - 頭部顏色
headerPressColorAndroid - Android 5.0 以上MD風格的波紋顏色
gesturesEnabled - 否能側滑返回， iOS 預設 true ， Android 預設 false

StackNavigatorConfigs 引數表示導航器的配置，包括導航器的初始頁面、各個頁面之間導航的動畫、頁面的配置選項等等：

initialRouteName - 導航器元件中初始顯示頁面的路由名稱，如果不設定，則預設第一個路由頁面為初始顯示頁面
initialRouteParams - 給初始路由的引數，在初始顯示的頁面中可以通過 this.props.navigation.state.params 來獲取
navigationOptions - 路由頁面的配置選項，它會被 RouteConfigs 引數中的 navigationOptions 的對應屬性覆蓋。
paths - 路由中設定的路徑的覆蓋對映配置
mode - 頁面跳轉方式，有 card 和 modal 兩種，預設為 card ：
card - 原生系統預設的的跳轉
modal - 只針對iOS平臺，模態跳轉
headerMode - 頁面跳轉時，頭部的動畫模式，有 float 、 screen 、 none 三種：
float - 漸變，類似iOS的原生效果
screen - 標題與螢幕一起淡入淡出
none - 沒有動畫
cardStyle - 為各個頁面設定統一的樣式，比如背景色，字型大小等
transitionConfig - 配置頁面跳轉的動畫，覆蓋預設的動畫效果
onTransitionStart - 頁面跳轉動畫即將開始時呼叫
onTransitionEnd - 頁面跳轉動畫一旦完成會馬上呼叫

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

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

navigete，呼叫這個方法可以跳轉到導航器中的其他頁面，此方法有三個引數：

— routeName 導航器中配置的路由名稱
— params 傳遞引數到下一個頁面
— action action
例如： this.props.navigation.navigate(‘Detail’, {param: ‘mine’});

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:‘my’})
}

goBack，回退，可以不傳參，也可以傳引數，還可以傳 null 。

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