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.FloatFromRight

configureScene={(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>
    );
}
   }