1.4 Navigator

自己做项目中的重点知识，不是教程，如果学习的话可以拿来参考。源代码[地址][2]
[2]: https://github.com/BaiPeiHe/react-native

简介

一个导航组件，用于进入下一界面，返回上一个界面；传递数据给下一界面，返回数据给上一界面。

使用

1、导入 Navigator
2、render 方法中返回 Navigator
3、调用 Navigator 的相应方法

实例

女孩向男孩送巧克力，男孩向女孩送花。
技术点

Navigator 的初始化
Navigator 页面条状（push,pop）
Navigator 传值和返回值

1、创建 Navigator，设置男孩页面为初始页面

// index.ios.js

import boy from './boy'

render() {
        return (
            <View style={styles.container}>
                <Navigator
                    // 初始化路由
                    initialRoute={{
                        component:boy
                    }}
                    // 页面跳转时的设置
                    renderScene={(route,navigator)=>{
                        let Component = route.component;
                        return <Component navigator={navigator}{...route.param}/>
                    }}></Navigator>
            </View>
        );
    }

2、男孩页面

/**
 * boy.js
 */
import React, { Component } from 'react';
import {
    View,
    Text,
    StyleSheet
}from 'react-native';

import girl from './girl'

export default class boy extends Component{

    // 构造方法
    constructor(props){
        super(props);
        this.state={
            word:''
        }
    }
    render(){
        return (
            <View style={styles.container}>
                <Text style={styles.text}>I am a Boy!</Text>
                <Text style={styles.text}
                    // 点击方法
                      onPress={()=> {
                          this.props.navigator.push({
                              component:girl,
                              param:{
                                  word:'一枝玫瑰',
                                  // 回调方法
                                  onCallBack:(word)=>{
                                      this.setState({
                                          word:word
                                      })
                                  }
                              }
                          })
                      }}>送女孩一朵玫瑰</Text>
                <Text style={styles.text}>{this.state.word}</Text>
            </View>
        )
    }
}
// 样式
const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'yellow',
        // 控件居中显示
        justifyContent:'center'
    },
    text:{
        fontSize:20,
    }
});

3、女孩页面

/**
 * girl.js
 */
import React,{Component} from 'react';
import {
    View,
    Text,
    StyleSheet
}from 'react-native';

export default class girl extends Component{

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

        }
    }

    render(){
        return(
            <View style={styles.container}>
                <Text style={styles.text}>I am a Girl.</Text>
                <Text style={styles.text}>我收到：{this.props.word}</Text>
                <Text style={styles.text}
                    // 点击方法
                      onPress={()=>{
                         // 回调方法
                          this.props.onCallBack('一盒巧克力')
                         // 返回页面
                          this.props.navigator.pop()
                      }}>回送巧克力</Text>
            </View>
        )
    }
}
// 样式
const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'red',
        // 控件居中显示
        justifyContent:'center'
    },
    text:{
        fontSize:22
    }
});