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

来源：互联网发布：动漫绘图软件编辑：程序博客网时间：2024/06/05 18:06

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, {Component} from 'react';import {    StyleSheet,    Navigator,    TouchableOpacity,    Text,    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,color: 'red',margin:10}}>这是第二个页面，点击可以回到上个页面</Text>            </TouchableOpacity>        </View>);    }    /**     * 跳转到下一个页面     */    jumpToFirst() {        /* push(route) 跳转到新的场景，并且将场景入栈，你可以稍后用jump forward 跳转回去*/            this.props.navigator.push({            component: FirstPage,        });    }}

这里写图片描述

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

0 0