第三章、ReactNative頁面跳轉

參考: ReactNative-中文網:ReactNative StackNavigation頁面跳轉

         GitHub官網:https://reactnavigation.org/docs/navigators/stack

ReactNative中文網社區今後主推的方案是一個單獨的導航庫react-navigation，它的使用十分簡單。

第一步: 安裝組件

yarn add react-navigation 

or
 

npm install --save react-navigation

第二步: 然後你就可以快速創建一個有兩個頁面（Main和Profile）的應用了：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

import {StackNavigator,} from 'react-navigation';
import Welcome from './transfer/Welcome';
import Profile from './transfer/Profile';

export default class RNStudy extends Component {


    constructor(props) {
        super(props);
    }

    componentDidMount() {

    }

    render() {
        return (
            <ModalStack/>
        );
    }
}
const ModalStack = StackNavigator(
    {
        Welcome: { screen: Welcome },//這樣是默認打開首頁
        Profile: { screen: Profile },
    },
    {
        navigationOptions: {
            headerBackTitle: "首頁",
            headerTintColor: '#000000',
            header:null,
            showIcon: true,
            swipeEnabled: true,
            animationEnabled: true,
        },
        mode: 'card',
    },
);

AppRegistry.registerComponent('RNStudy', () => RNStudy);

第三步、Profile界面

        this.props.navigation.goBack(null) //拿到navigation對象可以進行回退，跳轉;
        DeviceEventEmitter.emit("request");
        //this.props.navigation.navigate('TabPage', {name: ' Profile Page'});

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