初识Navigator

Navigator（导航器）

1.相同组件之间的跳转

第一步 初始化Navigator

==> 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 (
            
                    //MyScene为自定义组件，因为它的组件已确定，所以并没有达到我们想要的结果——跳转到不同的组件。但是用来做测试足以
                     {
                            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 (
            
                当前组件: { this.props.title }
                
                    点击进入下个组件
                
                
                    点击回到上个组件
                
            }}
            
        )
    }
}

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

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

第一步 初始化Navigator

==> Navigator概览

 {
        
        //声明即将要跳转到的组件
        let Component = route.component;
        
        //此处的{...route.params}对应页面跳转时push里的参数params
        return 
    }}
/>

==> 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 (
             {
                    let Component = route.component;
                    return 
                }}
            />
        );
    }
}

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 (
            
                
                    点击我进入第二个页面
                
            
        )
    }

    _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 (
            
                测试页面:{this.props.title}
                
                    点击我回到上一页面
                
            
        )
    }

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