Navigator（導(dǎo)航器）

1.相同組件之間的跳轉(zhuǎn)

第一步 初始化Navigator

==> Navigator概覽

<Navigator 
    initialRoute ={{自定義參數(shù)列表}}
    renderScene={(route, navigator) => 自定義組件}

/>

==> index.ios.js

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

import MyScene from './MyScene'

class Navigators extends Component {
    render() {
        return (
            <Navigator

                //此處的title和index是自定義的變量，他們作為一個(gè)整體會(huì)作為renderScene的第一個(gè)參數(shù)route
                initialRoute={{title: '初始化組件', index: 0}}

                //渲染下一個(gè)界面
                renderScene={(route, navigator) =>
                    //MyScene為自定義組件，因?yàn)樗慕M件已確定，所以并沒有達(dá)到我們想要的結(jié)果——跳轉(zhuǎn)到不同的組件。但是用來做測(cè)試足以
                    <MyScene
                        title={route.title}

                        //進(jìn)入下個(gè)組件 ，MyScene組件的自定義屬性之一
                        onForward={ () => {
                            const nextIndex = route.index + 1;
                            navigator.push({
                                //組件之間的傳值可以寫在這
                                title: '第' + nextIndex + '個(gè)組件',
                                index: nextIndex,
                            });
                        }}

                        //回到上個(gè)組件 ，MyScene組件的自定義屬性之一
                        onBack={() => {
                            if (route.index > 0) {
                                navigator.pop();
                            }
                        }}
                    />
                }
            />
        );
    }
}

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

第二步 自定義組件

==> MyScene.js

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

export default class MyScene extends React.Component {
    static propTypes = {
        title: React.PropTypes.string.isRequired,

        //聲明此屬性是一個(gè)方法
        onForward: React.PropTypes.func.isRequired,
        onBack: React.PropTypes.func.isRequired,
    }
    render() {
        return (
            <View style={{marginTop: 20, alignItems: 'center'}}>
                <Text style={{fontSize: 20, fontWeight: 'bold'}}>當(dāng)前組件: { this.props.title }</Text>
                <TouchableOpacity onPress={this.props.onForward}>
                    <Text>點(diǎn)擊進(jìn)入下個(gè)組件</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={this.props.onBack}>
                    <Text>點(diǎn)擊回到上個(gè)組件</Text>
                </TouchableOpacity>
            }}
            </View>
        )
    }
}

這里的onForward和onBack有點(diǎn)像OC中的block

2.自定義組件之間的跳轉(zhuǎn)

第一步 初始化Navigator

==> Navigator概覽

<Navigator
    //自定義參數(shù)列表,其中component表示要跳轉(zhuǎn)到的組件
    initialRoute={{component: defaultComponent}}
    
    //route是上面的自定義參數(shù)列表，navigator表示使用的Navigator對(duì)象
    renderScene={(route, navigator) => {
        
        //聲明即將要跳轉(zhuǎn)到的組件
        let Component = route.component;
        
        //此處的{...route.params}對(duì)應(yīng)頁面跳轉(zhuǎn)時(shí)push里的參數(shù)params
        return <Component {...route.params} navigator={navigator} />
    }}
/>

==> index.ios.js

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

import FirstPage from './FirstPage'

class Navigators extends React.Component {
    render() {
        let defaultComponent = FirstPage;
        return (
            <Navigator
                initialRoute={{component: defaultComponent}}
                renderScene={(route, navigator) => {
                    let Component = route.component;
                    return <Component {...route.params} navigator={navigator} />
                }}
            />
        );
    }
}

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

第二步 自定義組件

==> FirstPage.js

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

import SecondPage from './SecondPage'

export default class FirstPage extends React.Component {
    render() {
        return (
            <View style={{marginTop: 20}}>
                <TouchableOpacity
                    onPress = {this._pressButton.bind(this)}
                >
                    <Text>點(diǎn)擊我進(jìn)入第二個(gè)頁面</Text>
                </TouchableOpacity>
            </View>
        )
    }

    _pressButton() {
        const { navigator } = this.props;
        if (navigator) {
            navigator.push({
                component: SecondPage,
                params:{
                    title:'FirstPage'
                }
            })
        }
    }
}

注意：在render中的return中如果要調(diào)用本組件中的自定義方法，需要綁定。如onPress = {this._pressButton.bind(this)}

至此，在自定義組件中如果要跳轉(zhuǎn)到其他的界面，可以使用push/pop方法。

==> SecondPage.js

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

export default class SecondPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            title: null
        }
    }
    componentDidMount() {
        //這里獲取從FirstPageComponent傳遞過來的參數(shù):
        this.setState({
            title: this.props.title
        });
    }

    render() {
        console.log(this.state.title);
        return (
            <View style={{marginTop: 20, backgroundColor: 'yellow'}}>
                <Text>測(cè)試頁面:{this.props.title}</Text>
                <TouchableOpacity onPress={this._pressButton.bind(this)}>
                    <Text>點(diǎn)擊我回到上一頁面</Text>
                </TouchableOpacity>
            </View>
        )
    }

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