Navigator（导航器）

1.相同组件之间的跳转

第一步 初始化Navigator

==> Navigator概览

<Navigator 
    initialRoute ={{自定义参数列表}}
    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是自定义的变量，他们作为一个整体会作为renderScene的第一个参数route
                initialRoute={{title: '初始化组件', index: 0}}

                //渲染下一个界面
                renderScene={(route, navigator) =>
                    //MyScene为自定义组件，因为它的组件已确定，所以并没有达到我们想要的结果——跳转到不同的组件。但是用来做测试足以
                    <MyScene
                        title={route.title}

                        //进入下个组件 ，MyScene组件的自定义属性之一
                        onForward={ () => {
                            const nextIndex = route.index + 1;
                            navigator.push({
                                //组件之间的传值可以写在这
                                title: '第' + nextIndex + '个组件',
                                index: nextIndex,
                            });
                        }}

                        //回到上个组件 ，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,

        //声明此属性是一个方法
        onForward: React.PropTypes.func.isRequired,
        onBack: React.PropTypes.func.isRequired,
    }
    render() {
        return (
            <View style={{marginTop: 20, alignItems: 'center'}}>
                <Text style={{fontSize: 20, fontWeight: 'bold'}}>当前组件: { this.props.title }</Text>
                <TouchableOpacity onPress={this.props.onForward}>
                    <Text>点击进入下个组件</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={this.props.onBack}>
                    <Text>点击回到上个组件</Text>
                </TouchableOpacity>
            }}
            </View>
        )
    }
}

这里的onForward和onBack有点像OC中的block

2.自定义组件之间的跳转

第一步 初始化Navigator

==> Navigator概览

<Navigator
    //自定义参数列表,其中component表示要跳转到的组件
    initialRoute={{component: defaultComponent}}
    
    //route是上面的自定义参数列表，navigator表示使用的Navigator对象
    renderScene={(route, navigator) => {
        
        //声明即将要跳转到的组件
        let Component = route.component;
        
        //此处的{...route.params}对应页面跳转时push里的参数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>点击我进入第二个页面</Text>
                </TouchableOpacity>
            </View>
        )
    }

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

注意：在render中的return中如果要调用本组件中的自定义方法，需要绑定。如onPress = {this._pressButton.bind(this)}

至此，在自定义组件中如果要跳转到其他的界面，可以使用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传递过来的参数:
        this.setState({
            title: this.props.title
        });
    }

    render() {
        console.log(this.state.title);
        return (
            <View style={{marginTop: 20, backgroundColor: 'yellow'}}>
                <Text>测试页面:{this.props.title}</Text>
                <TouchableOpacity onPress={this._pressButton.bind(this)}>
                    <Text>点击我回到上一页面</Text>
                </TouchableOpacity>
            </View>
        )
    }

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