React Native導航器Navigator

React Native導航器Navigator

　　使用導航器可以讓你在應用的不同場景（頁面）間進行切換。導航器通過路由對象來分辨不同的場景。利用renderScene方法，導航欄可以根據指定的路由來渲染場景。可以通過configureScene屬性獲取指定路由對象的配置信息，從而改變場景的動畫或者手勢。——以上內容摘錄自React Native中文網

一、Navigator的屬性

configureScene

　　可選的函數，用來配置場景動畫和手勢。會帶有兩個參數調用，一個是當前的路由，一個是當前的路由棧。然后它應當返回一個場景配置對象。

　　使用方式：

　　(route, routeStack) => Navigator.SceneConfigs.FloatFromRight

　　切換效果有：

　　Navigator.SceneConfigs.PushFromRight (默認)

　　Navigator.SceneConfigs.FloatFromRight

　　Navigator.SceneConfigs.FloatFromLeft

　　Navigator.SceneConfigs.FloatFromBottom

　　Navigator.SceneConfigs.FloatFromBottomAndroid

　　Navigator.SceneConfigs.FadeAndroid

　　Navigator.SceneConfigs.HorizontalSwipeJump

　　Navigator.SceneConfigs.HorizontalSwipeJumpFromRight

　　Navigator.SceneConfigs.VerticalUpSwipeJump

　　Navigator.SceneConfigs.VerticalDownSwipeJump

initialRoute

　　類類型的屬性，定義啟動時加載的路由。路由是導航欄用來識別渲染場景的一個對象。initialRoute必須是initialRouteStack中的一個路由。initialRoute默認為initialRouteStack中最后一項。

initialRouteStack

　　類類型的屬性，用來在Navigator組件初加載時提供導航路徑。如果沒有向Navigator組件提供initialRoute屬性，就必須提供initialRouteStack屬性；如果提供了initialRoute但沒有提供initialRouteStack，那么React Native會生成一個只有initialRoute元素的數據作為initialRouteStack。

navigationBar

　　該屬性返回一個可以渲染的節點，這個節點可以用作所有界面的通用導航欄。當開發者決定使用navigationBar來進行導航時，大部分應用界面的導航欄都具有相同的格式（相同大小的按鈕、標題欄等），只是按鈕的圖片或者標題欄中的文字各有不同。

　　給Navigator組件指定導航欄的示例如下：

　　navigationBar = {
    　　<Navigator.NavigationBar routeMapper={ navigationBarRouteMapper}/>
　　}

　　Navigator.NavigationBar是一個可顯示的React Native組件，它必須有一個routeMapper屬性。開發者必須將一個對象指定給routeMapper屬性。這個對象可以有三個成員變量：LeftButton、RightButton、Title。其中，Title成員變量必須有。這三個成員變量要求都是函數類型的，Navigator組件渲染導航欄時，使用這三個函數的返回值渲染導航欄的對應區域。

　　每個函數可以接收4個參數。示例：

　　LeftButton: function( route, navigator, index, navState)

　　在三個成員函數返回的可渲染節點的樣式中設置三個區域的大小。這三個函數返回的可渲染節點就是三個區域中顯示的內容。

　　不同的頁面需要控制這三個區域中顯示不同的內容，開發者需要將不同頁面待顯示的不同內容（文字、圖片）通過route傳入這三個函數中，然后這三個函數從route的成員變量中去處傳入的供顯示的不同內容，最后渲染顯示。

　　對按鈕或輸入框的處理，通常都需要調用父組件的函數，這就需要將這個父組件的函數以某種方式傳入routeMapper屬性中。開發者無法直接給routeMapper屬性再傳值，但是可以放在route中，由Natigator組件在渲染時交給routeMapper屬性。而route中的成員變量，都是由開發者提供的，並且對每個事件只能提供一個回調函數，准確地說，是最近一次提供的回調函數會覆蓋上一次提供的回調函數。

Navigator

　　提供從父導航器獲得的導航器對象。

onDidFocus

　　每當導航切換完成或初始化之后，調用此回調，參數為新場景的路由。

　　React native鼓勵開發者使用navigationContext.addListener(‘didfocus’,callback)事件監聽器來實現相同的功能。

onWillFocus

　　會在導航切換之前調用，參數為目標路由。

　　React native鼓勵開發者使用navigationContext.addListener(‘willfocus’,callback)事件監聽器來實現相同的功能。

renderScene

　　必要參數。用來渲染指定路由的場景。調用的參數是路由和導航器。

sceneStyle

　　指定的樣式將被應用到每一個切換的場景中。

二、導航器的函數

getCurrentRoutes()

　　獲取當前棧里的路由，也就是push進來，沒有pop掉的那些。

jumpBack()

　　退回到上一個界面而不卸載當前界面。

jumpForward()

　　沿界面路徑向前跳一個界面而不卸載當前界面。

jumpTo(route)

　　跳轉到某個界面而不卸載任何界面。

push(route)

　　導航組件在路徑列表最前端添加一個新的界面，並馬上跳轉至這個界面。

pop()

　　導航器退回一個界面並卸載原界面。

replace(route)

　　用一個新的路由替換掉當前場景。

replaceAtIndex(route, index)

　　使用一個新的界面替代路徑表中的第index個界面，但不改變當前顯示界面。

　　replacePrevious(route)

　　將當前導航路徑的上一個界面使用指定的界面替代。

resetTo(route)

　　跳轉到新的場景，並且重置整個路由棧。

immediatelyResetRouteStack(routeStack)

　　使用給定的路徑表替換當前的路徑列表。

　　popToRoute(route)

　　導航器回退到指定的界面，並且將這個過程中回退過的界面都卸載。

popToTop()

　　導航器回退到的第一個場景，卸載掉所有的其他場景。

 

三、Navigator傳值

實現的效果為：第一個界面向第二個界面傳值，在第二個界面中改變第一個界面的顯示內容。

index.android.js

import React from 'react';
import {
    View,
    Navigator,
    AppRegistry
} from 'react-native';
import FirstPageComponent from './js/FirstPageComponent';
export default class SampleComponent extends React.Component {
    render() {
        let defaultName = 'FirstPageComponent';
        let defaultComponent = FirstPageComponent;
        return (
            <Navigator
                initialRoute={{ name: defaultName, component: defaultComponent }}
                configureScene={(route) => {
                    return Navigator.SceneConfigs.HorizontalSwipeJumpFromRight;
                }}
                renderScene={(route, navigator) => {
                    let Component = route.component;
                    return <Component {...route.params} navigator={navigator} />
                }}
            />
        );
    }
}

AppRegistry.registerComponent('listen1', () => SampleComponent);

 

第一個界面

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

import SecondPageComponent from './SecondPageComponent';

export default class FirstPageComponent extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            id: 2,
            user: null,
        }
    }


    _pressButton() {
        let _this = this;
        const { navigator } = this.props;
        if(navigator) {
            navigator.push({
                name: 'SecondPageComponent',
                component: SecondPageComponent,
                params: {
                    id: this.state.id,
                    //從SecondPageComponent獲取user
                    getUser: function(user) {
                        _this.setState({
                            user: user
                        })
                    }
                }
            });
        }
    }

    render() {
        if( this.state.user ) {
            return(
                <View>
                    <Text>用戶信息: { JSON.stringify(this.state.user) }</Text>
                </View>
            );
        }else {
            return(
                <View>
                    <TouchableOpacity onPress={this._pressButton.bind(this)}>
                        <Text>查詢ID為{ this.state.id }的用戶信息</Text>
                    </TouchableOpacity>
                </View>
            );
        }

    }
}

 

第二個界面

const USER_MODELS = {
    1: { name: 'mot', age: 23 },
    2: { name: '晴明大大', age: 25 }
};

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

import FirstPageComponent from './FirstPageComponent';

export default class SecondPageComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            id: null
        }
    }

    componentDidMount() {
        //這里獲取從FirstPageComponent傳遞過來的參數: id
        this.setState({
            id: this.props.id
        });
    }

    _pressButton() {
        const { navigator } = this.props;

        if(this.props.getUser) {
            let user = USER_MODELS[this.props.id];
            this.props.getUser(user);
        }

        if(navigator) {
            navigator.pop();
        }
    }

    render() {
        return(
            <View>
                <Text>獲得的參數: id={ this.state.id }</Text>
                <TouchableOpacity onPress={this._pressButton.bind(this)}>
                    <Text>點我跳回去</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

　　

　　在第二個界面中修改第一個界面的原理是：在第一個界面中聲明一個方法，可以更改其state。我們知道，state發生改變，界面就會重新渲染。在傳值的時候，將該方法作為一個屬性傳給第二個界面。在第二個界面中執行該方法，就重新渲染了第一個界面。只不過此時的第一界面沒有在屏幕上。當第二個界面卸載（pop）后，返回第一個界面，就看到了更改后的第一個界面。