此部落格基於react-native-0.48.4

Navigator（導航欄）

在ReactNative v0.43之前的時候官方提供了Navigator元件，在v0.44版本之後官方就把他廢棄了這是為什麼呢？原因就是有個比他更好的react-navigation導航欄了、不得不說第三方依賴庫真的很強大。

React Navigation

• 其中包含了我們開發中最常用的三種導航方式
  
  • StackNavigator（頂部導航欄）
  • TabNavigator （標籤導航欄）
  • DrawerNavigator（側滑選單導航欄）
  • 效果圖可以在官網首頁看下

這篇文章就簡單來說說StackNavigator

• 既然使用的是第三方庫，如果在你專案的node_modules資料夾中沒有react-navigation那麼你需要執行如下命令

//進入你專案的根目錄下執行
npm install --save react-navigation

引入react-navigation中的StackNavigator

• 建立一個Application.js檔案

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

import React from 'react';

const Main = require('./Main');
const
 
 Detail = require('./Details');
const Menu = require('./Menu');

/*
 * 初始化StackNavigator
 */
export default App = StackNavigator({
    //預設載入第一個頁面，這裡用來註冊需要跳轉的頁面 相當於Manifest.xml檔案
    Main: {
        screen: Main,
    },
    Detail: {
        screen: Detail,
    },
    Menu: {
        screen: Menu,
    }
});
 

這個檔案負責對我們需要跳轉的頁面進行註冊（相當於在Android中每一個Activity都需要在清單檔案中註冊），同時也建立了navigation供後續操作。

• 修改 android 和 ios 的入口檔案載入這個檔案，然後就會繼續載入Main頁面 最終顯示內容

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

//這裡不能寫var App = require('./src/Application'); 會出現問題
//（小白剛學還不會，有路過的大神可以留言教一下）。
import App from './src/Application';

export default class Pagejump extends Component {
    render() {
        return (
            <App/>
        );
    }
}

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

效果圖：

在Main頁面新增一個按鈕跳轉至下一個頁面、並修改導航欄的樣式

import React, {Component} from 'react';
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
} from 'react-native';

class Main extends Component {

    //設定頂部導航欄的內容
    static navigationOptions = ({navigation, screenProps}) => ({
        //左側標題
        headerTitle: '我是主頁面',
        //設定跳轉頁面左側返回箭頭後面的文字，預設是上一個頁面的標題
        headerBackTitle: null,
        //頂部標題欄的樣式
        headerStyle: styles.headerStyle,
        //頂部標題欄文字的樣式
        headerTitleStyle: styles.headerTitleStyle,
    });

    render() {
        return (
            <View style={styles.container}>
                {/*頁面跳轉*/}
                <TouchableOpacity style={styles.button} activeOpacity={0.5} onPress={() => {
                    this.props.navigation.navigate('Detail', {key: '傳遞的標題'})
                }}>
                    <Text style={{color: 'white'}}>帶引數 跳轉至Details頁面</Text>
                </TouchableOpacity>
                <Text style={{marginTop: 10, color: 'black'}}>當前是Main頁面</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    button: {
        width: 240,
        height: 45,
        borderRadius: 5,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#4398ff',
    },
    headerStyle: {
        backgroundColor: '#4398ff',
    },
    headerTitleStyle: {
        //標題的文字顏色
        color: 'white',
        //設定標題的大小
        fontSize: 18,
        //居中顯示
        alignSelf: 'center',
    },
});
module.exports = Main;

這裡就要重點說一說navigationOptions中的屬性了

• headerTitle: '標題' ===> 導航欄的標題
• header: null ===> 隱藏導航欄
• headerTintColor: 'white' ===> 返回按鈕的顏色
• headerTitleStyle: {} ===> 導航欄文字的樣式
• headerStyle: {} ===> 導航欄的樣式
• headerRight: (< View/>) ===> 設定頂部導航欄友邊的檢視 和 解決當有返回箭頭時，文字不居中
• headerLeft: (< View/>) ===> 設定導航欄左邊的檢視 和 去除返回箭頭
• headerBackTitle: null ===> 設定跳轉頁面左側返回箭頭後面的文字，預設是上一個頁面的標題
• gestureResponseDistance: {horizontal: 300} ===> //設定滑動返回的距離

上面跳轉頁面的時候我們向下一個頁面傳遞了一個鍵值為key的引數

//頁面跳轉 第一個引數則是我們在`Application.js`中註冊的頁面
//第二個引數則是傳遞的引數，也可以不傳。
this.props.navigation.navigate('Detail', {key: '傳遞的標題'}

//跳轉頁面的第二種寫法
const {navigate} = this.props.navigation;
navigate('Detail', {key: '傳遞的引數'});

//沒有引數的情況
const {navigate} = this.props.navigation;
navigate('Detail');

頁面接收傳遞過來的值

navigation.state.params.key //key就是你自己設定的鍵

頁面跳轉效果圖（有點失幀）

Details頁面這裡就不貼出了，跟Main內容都是差不多的。可以檢視文末給出的原始碼

主要說一下最後一個帶有選單的頁面

• 主要還是配置navigationOptions屬性

//設定頂部導航欄的內容
static navigationOptions = ({navigation, screenProps}) => ({
    // 這裡面的屬性和App.js的navigationOptions是一樣的。
    headerTitle: '我是帶有選單的頁面',
    // 設定滑動返回的距離
    gestureResponseDistance: {horizontal: 300},
    //設定跳轉頁面左側返回箭頭後面的文字，預設是上一個頁面的標題
    headerBackTitle: null,
    //頂部標題欄的樣式
    headerStyle: styles.headerStyle,
    //頂部標題欄文字的樣式
    headerTitleStyle: styles.headerTitleStyle,
    //返回按鈕的顏色
    headerTintColor: 'white',
    //設定頂部導航欄左邊的檢視
    headerLeft: (<View/>),
    //設定頂部導航欄左邊的檢視  和 解決當有返回箭頭時，文字不居中
    headerRight: (
        <Text style={{color: 'white', marginRight: 13}}
              onPress={() => navigation.state.params ? navigation.state.params.menuClick() : null}>新增
        </Text>),
});

• 隱藏左邊返回箭頭：headerLeft: (< View/>),
• 新增右邊的選單：headerRight: (),

對選單新增點選事件,新增headerRight檢視的時候我們已經呼叫好了方法現在只需要定義即可

• 需要在view渲染完成之後新增點選事件

componentDidMount() {
    // 通過在componentDidMount裡面設定setParams
    this.props.navigation.setParams({
        menuClick: this.menuClick,
    });
}

• 點選事件響應的函式

menuClick = () => {
    alert('我是新增選單');
};

End：StackNavigator就簡單的介紹到這裡來，原始碼下載地址如果遇到什麼問題歡迎留言或者issuse

推薦閱讀：