Navigator的基本使用

什么是Navigator

• 它是一个导航组件，
• 用于进入下一个界面，返回上一个界面，
• 并且传递数据给下一个界面，返回数据给上一个界面。

如何使用Navigator

• 导入Navigator，由于Navigator是ReactNative官方所支持的组件，所以不需要安装。
• 在render中返回Navigator
• 调用Navigator的相应方法

PageJump.js

import React,{Component} from 'react';
import {View,StyleSheet} from 'react-native';
import {Navigator } from 'react-native-deprecated-custom-components';
import PageJump1 from './PageJump1'
export default class PageJump extends Component{
    render(){
        return (
            
                {
                        let Component = route.component;
                        return 
                    }}
                />
            
        )
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#F5FCFF',
    }
})

PageJump1.js

import React,{Component} from 'react';
import {Text, View,StyleSheet,Button } from 'react-native';
import PageJump2 from './PageJump2';

export default class PageJump1 extends Component{

    constructor(props){
        super(props)
        this.state={
            word:''
        }
    }

    render(){
        return (
            
                我是第一个页面 
                {
                            this.props.navigator.push({
                                component:PageJump2,
                                params:{
                                    word:'PageJump1的数据',
                                    onCallBack:(word)=>{
                                        this.setState({
                                            word:word
                                        })
                                    }
                                }
                            })
                        }}/>

                {this.state.word}
            
        )
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'red',
    },
    text:{
        fontSize:20
    }
})

PageJump2.js

import React,{Component} from 'react';
import {Text, View,StyleSheet,Button } from 'react-native';

export default class PageJump2 extends Component{

    constructor(props){
        super(props)
        this.state={

        }
    }

    render(){
        return (
            
                 我是第二个页面
                 收到了：{this.props.word}
                {
                        this.props.onCallBack('PageJump2的数据')
                        this.props.navigator.pop()
                    }}
                />
            
        )
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'green',
        justifyContent:'center'
    },
    text:{
        fontSize:20
    }
})