react-native--Navigator

'use strict';import React, {    AppRegistry,    Component,    Navigator,} from 'react-native';import SplashScreen from './splash.js'class AwesomeProject extends Component {    render() {        let defaultName = 'Splash';        let defaultComponent = SplashScreen;        return (            <Navigator                initialRoute={{ name: defaultName, component: defaultComponent }}                configureScene={(route) => {                    return Navigator.SceneConfigs.HorizontalSwipeJumpFromRight;                } }                renderScene={(route, navigator) => {                    let Component = route.component;                    return <Component {...route.params} navigator={navigator} />                } }                />        );    }}AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

//代码分析：
initialRoute–定义启动时加载的路由。路由是导航栏用来识别渲染场景的一个对象。initialRoute必须是initialRouteStack中的一个路由。initialRoute默认为initialRouteStack中最后一项！

initialRoute={{ name: defaultName, component: defaultComponent }} 这个指定了默认的页面，也就是启动app之后会看到界面的第一屏。 需要填写两个参数: name 跟 component。

configureScene
可选的函数，用来配置场景动画和手势。会带有两个参数调用，一个是当前的路由，一个是当前的路由栈。然后它应当返回一个场景配置对象！

(route, routeStack) => Navigator.SceneConfigs.FloatFromRightconfigureScene={(route) => {                    return Navigator.SceneConfigs.HorizontalSwipeJumpFromRight;                } }

renderScene function
必要参数。用来渲染指定路由的场景。调用的参数是路由和导航器。

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

…route.params—-数据传递来源

route传递的是component和name，navigator传递的Navigator对象，navigator作为props传递给component！

如果你得到了一个navigator对象的引用，则可以调用许多方法来进行导航：
getCurrentRoutes() - 获取当前栈里的路由，也就是push进来，没有pop掉的那些
jumpBack() - 跳回之前的路由，当然前提是保留现在的，还可以再跳回来，会给你保留原样
jumpForward() - 进行跳转到相当于当前页面的下一个页面
jumpTo(route) - 根据传入的路由信息，跳转到一个指定的路由，并且不卸载
push(route) - 导航切换到一个新的页面，新的页面会进入栈中，可以使用jumpfonward()跳转回去
pop() - 当前页面弹出栈，跳转下一个页面，并且卸载掉当前场景
replace(route) - 使用传入的路由的指定页面替换掉当前场景
replaceAtIndex(route, index) - 传入路由以及位置索引，使用该路由指 定的页面跳转到指定位置的页面
replacePrevious(route) - 传入路由，通过指定路由替换前一个页面
immediatelyResetRouteStack(routeStack) - 用新的路由数组来重置路由栈
popToRoute(route) - pop，弹出相关页面，跳转到路由指定的页面，弹出的页面会被删除
popToTop() - pop，弹出页面，导航到栈找中的第一个页面，弹出来的所有页面都被卸载
resetTo(route) -进行导航到新的页面，并且重置整个路由栈

//页面进行跳转'use strict'import React, {    Component,   TouchableOpacity,   View,   Text,} from 'react-native'import OnepageCompent from './index.one.js'export default class SecondPageComponent extends Component {    constructor(props) {        super(props);        this.state = {};    }    _pressButton() {         const { navigator } = this.props;        if(navigator) {           //进入            navigator.push({                name: 'OnepageCompent',                component: OnepageCompent,            })        }    }    render() {        return(             <View>                <TouchableOpacity onPress={this._pressButton.bind(this)}>                    <Text>点我</Text>                </TouchableOpacity>            </View>        );    }}'use strict'import React, {    Component,   TouchableOpacity,   View,   Text,} from 'react-native'export default class OnepageCompent extends Component {    constructor(props) {        super(props);        this.state = {};    }    _pressButton() {        const { navigator } = this.props;        if(navigator) {          //跳转回去并且卸载掉当前场景<显示前一个页面>            navigator.pop();        }    }    render() {        return(             <View>                <TouchableOpacity onPress={this._pressButton.bind(this)}>                    <Text>点我跳回去</Text>                </TouchableOpacity>            </View>        );    }}

这个语法是把 route.params 里的每个key 作为props的一个属性:
<其他参数也是作为KEY>

 navigator.push({                name: 'OnepageCompent',                component: OnepageCompent,            })

这里的route，最基本的route就是:var route = {    component: LoginComponent}

参数传递：

 constructor(props) {        super(props);        this.state = {            id:2        };    }    _pressButton() {         const { navigator } = this.props;        if(navigator) {            navigator.push({                name: 'OnepageCompent',                component: OnepageCompent,                params:{                    id:this.state.id                }            })        }    }

参数获取：

constructor(props) {        super(props);        this.state = {            id:null        };    }     componentDidMount(){         this.setState({            id: this.props.id        });     }

特殊需求：当然页面跳转到下一个页面，下一个页面处理玩数据，返回到前一个页面<当前页面>处理数据
<概念：上一个页面的实例或者回调方法，作为参数传递到当前页面来，在当前页面操作上一个页面的state>

   'use strict'    import React, {Component,  TouchableOpacity,View,Text,ToastAndroid, } from 'react-native' import OnepageCompent from './index.one.js'  export default class SecondPageComponent extends Component {constructor(props) {    super(props);    this.state = {        id:1,        user:null,    };}    _pressButton() {    let _this = this;    const { navigator } = this.props;    if(navigator) {        navigator.push({            name: 'OnepageCompent',            component: OnepageCompent,            params: {                id: this.state.id,                getUser: function(user) {                    _this.setState({                        user: user                    })                }            }        });    }}render() {        if( this.state.user ) {        return(            <View>                <Text>用户信息: { JSON.stringify(this.state.user) }</Text>            </View>        );    }else {        return(            <View>                <TouchableOpacity onPress={this._pressButton.bind(this)}>                    <Text>查询ID为{ this.state.id }的用户信息</Text>                </TouchableOpacity>            </View>        );    }} }  'use strict' import React, {  Component,TouchableOpacity,View,Text,ToastAndroid,} from 'react-native'  const USER_MODELS = {1: { name: 'mot', age: 23 },2: { name: '晴明大大', age: 25 }};  export default class OnepageCompent extends Component {constructor(props) {    super(props);    this.state = {        id: null    };}componentDidMount() {    this.setState({        id: this.props.id    });}_pressButton() {        const { navigator } = this.props;        if(this.props.getUser) {            let user = USER_MODELS[this.props.id];            this.props.getUser(user);        }        if(navigator) {            navigator.pop();        }}render() {    return (        <View>            <TouchableOpacity onPress={this._pressButton.bind(this) }>                <Text>点我跳回去</Text>            </TouchableOpacity>        </View>    );}   }