React-Native学习笔记之：导航器Navigator实现页面间跳转

Navigator用来实现不同页面的切换，想设置Navigator，必须确定一个或多个调用routes对象，去定义每个场景。
还可以利用renderScene方法，导航栏可以根据指定的路由来渲染场景。
//项目的入口index.android.js页面

import React,{Component} from 'react';

import {
    AppRegistry,StyleSheet,View,Navigator
} from 'react-native';
import FirstPage from './FirstPage'
export default class StudyGithub extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    renderScene(route,navigator) {
        let Component = route.component;
        return (
            <Component {...route.params} navigator={navigator}/>
        );
    }

    render() {
        return (
            <Navigator
                initialRoute={{
                        name: 'FirstPage',component:FirstPage
                    }}
                renderScene={(e,i)=>this.renderScene(e,i)}
            />
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },tabText: {
        fontSize: 10,color: 'black'
    },selectedTabText: {
        fontSize: 10,color: 'red'
    },icon: {
        width: 22,height: 22
    },page0: {
        flex: 1,backgroundColor: 'yellow'
    },page1: {
        flex: 1,backgroundColor: 'blue'
    }
});

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

跳转到第一个页面FirstPage.js

import React,{Component} from 'react';
import {
    StyleSheet,Navigator,TouchableOpacity,Text,View
} from 'react-native'
import  SecondPage from './SecondPage'
export  default  class FirstPage extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (<View>
            <TouchableOpacity
                onPress={()=>this.jumpToNext()}>
                <Text style={{fontSize:20,color: 'blue',margin:10}}>这是第一个页面，点击可以跳转到下一个页面</Text>
            </TouchableOpacity>
        </View>);
    }

    /** * 跳转到下一个页面 */
    jumpToNext() {
       /* resetTo(route) 跳转到指定的新场景，并重置路由栈*/
        this.props.navigator.resetTo({
            component: SecondPage,/* 传递参数*/
            params: {
                text: 'jump to the second page'
            }
        });
    }
}

从FirstPage跳转到SecondPage.js页面

import React,View
} from 'react-native'
import FirstPage from './FirstPage'
export  default  class SecondPage extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (<View>
            <Text style={{fontSize:20,color: 'red',margin:10}}>{this.props.text}</Text>
            <TouchableOpacity
                onPress={()=>this.jumpToFirst()}>
                <Text style={{fontSize:20,margin:10}}>这是第二个页面，点击可以回到上个页面</Text>
            </TouchableOpacity>
        </View>);
    }

    /** * 跳转到下一个页面 */
    jumpToFirst() {
        /* push(route) 跳转到新的场景，并且将场景入栈，你可以稍后用jump forward 跳转回去*/
            this.props.navigator.push({
            component: FirstPage,});
    }
}

Navigator的其它属性及介绍可以参考：http://www.tuicool.com/articles/aQVFJny

原文地址：https://www.jb51.cc/react/304228.html