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 (
            <View style={styles.container}>
                <Navigator
                    initialRoute={{
                        component:PageJump1
                    }}
                    //renderScene:每个页面被渲染的时候都会回调这个renderScene方法
                    // 回调renderScene后会传进来连个参数：route(路由)和navigator
                    renderScene={(route,navigator)=>{
                        let Component = route.component;
                        return <Component navigator={navigator}{...route.params}/>
                    }}
                />
            </View>
        )
    }
}

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 (
            <View style={styles.container}>
                <Text style={styles.text}>我是第一个页面 </Text>
                <Button title="跳转到第二个页面"
                        onPress={()=>{
                            this.props.navigator.push({
                                component:PageJump2,
                                params:{
                                    word:'PageJump1的数据',
                                    onCallBack:(word)=>{
                                        this.setState({
                                            word:word
                                        })
                                    }
                                }
                            })
                        }}/>

                <Text style={styles.text}>{this.state.word}</Text>
            </View>
        )
    }
}

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 (
            <View style={styles.container}>
                <Text style={styles.text}> 我是第二个页面</Text>
                <Text style={styles.text}> 收到了：{this.props.word}</Text>
                <Button
                    title='回退'
                    onPress={()=>{
                        this.props.onCallBack('PageJump2的数据')
                        this.props.navigator.pop()
                    }}
                />
            </View>
        )
    }
}

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