RN（react native）入坑指南-07,使用navigator实现页面跳转

前言

　　此文完全参考React-Native中文社区的博客新手理解navigator的教程而来,建议直接跳转链接进行详细学习,为防止链接失效或不可抗力因素无法访问,个人整理简单记录如下.

开始

由于前一篇文章将代码进行了分层整理,所以我们的index.android.js已经变得相对简洁

index.android.js

'use strict';import React,{Navigator,AppRegistry} from 'react-native';{/**引入Login组件 */}import Login from './src/login/Login.js';class TaraRn extends React.Component {  render() {    {/** 默认组件名称以及默认组件 */}    let defaultName = "Login";    let defaultComponent = Login;    return (     <Navigator                    //初始化组件          initialRoute={{ name: defaultName, component: defaultComponent }}              //页面切换效果           configureScene={(route) => {            return Navigator.SceneConfigs.VerticalDownSwipeJump;          }}          renderScene={(route, navigator) => {            let Component = route.component;            return <Component {...route.params} navigator={navigator} />          }} />    )  }}AppRegistry.registerComponent('TaraRn', () => TaraRn);

这里来解释一下代码:

第三行: 一个初始首页的component名字，比如我写了一个component叫HomeComponent，那么这个name就是这个组件的名字【HomeComponent】了。

第四行: 这个组件的Class，用来一会儿实例化成 标签

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

第八，九，十行: configureScene={() => {
return Navigator.SceneConfigs.VerticalDownSwipeJump;
}} 这个是页面之间跳转时候的动画，具体有哪些？
- Navigator.SceneConfigs.PushFromRight (默认)
- Navigator.SceneConfigs.FloatFromRight
- Navigator.SceneConfigs.FloatFromLeft
- Navigator.SceneConfigs.FloatFromBottom
- Navigator.SceneConfigs.FloatFromBottomAndroid
- Navigator.SceneConfigs.FadeAndroid
- Navigator.SceneConfigs.HorizontalSwipeJump
- Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
- Navigator.SceneConfigs.VerticalUpSwipeJump
- Navigator.SceneConfigs.VerticalDownSwipeJump

最后的几行:

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

这里是每个人最疑惑的，我们先看到回调里的两个参数:route, navigator。通过打印我们发现route里其实就是我们传递的name,component这两个货，navigator是一个Navigator的对象，为什么呢，因为它有push pop jump…等方法，这是我们等下用来跳转页面用的那个navigator对象。
return <Component {...route.params} navigator={navigator} />
这里有一个判断，也就是如果传递进来的component存在，那我们就是返回一个这个component，结合前面 initialRoute 的参数，我们就是知道，这是一个会被render出来给用户看到的component，然后navigator作为props传递给了这个component。

• getCurrentRoutes() - 获取当前栈里的路由，也就是push进来，没有pop掉的那些。
• jumpBack() - 跳回之前的路由，当然前提是保留现在的，还可以再跳回来，会给你保留原样。
• jumpForward() - 上一个方法不是调到之前的路由了么，用这个跳回来就好了。
• jumpTo(route) - 跳转到已有的场景并且不卸载。
• push(route) - 跳转到新的场景，并且将场景入栈，你可以稍后跳转过去
• pop() - 跳转回去并且卸载掉当前场景
• replace(route) - 用一个新的路由替换掉当前场景
• replaceAtIndex(route, index) - 替换掉指定序列的路由场景
• replacePrevious(route) - 替换掉之前的场景
• immediatelyResetRouteStack(routeStack) - 用新的路由数组来重置路由栈
• popToRoute(route) - pop到路由指定的场景，其他的场景将会卸载。
• popToTop() - pop到栈中的第一个场景，卸载掉所有的其他场景。

Login.js

'use strict';{/**引入样式文件 */}import styles from './Login.style.js';{/**引入图标字体 */}import Icon from 'react-native-vector-icons/FontAwesome';{/**引入Homepage */}import Home from '../home/Home.js';import React, {  Component,   TouchableHighlight,  Text,} from 'react-native';export default class Login extends Component {  constructor(props){    super(props);    this.state = {      name : null    }      }  _onLogin(){       // 进行跳转并传递参数    this.props.navigator.push({      title : 'homepage',      component:Home,      params : {        name : 'Tom'      }    })  }  render() {    return (      <View style={styles.container}>                <TouchableHighlight            style={styles.th}            underlayColor="rgb(210, 230, 255)"            onPress = {this._onLogin.bind(this)}>            <View>              <Text>登录</Text>            </View>        </TouchableHighlight>            </View>    );  }

Home.js

'use strict'import React,{    Component,    TouchableOpacity,    View,    Text} from 'react-native'import styles from './Home.style.js';export default class Home extends Component{  constructor(props){      super(props);      this.state = {          name : 'Frank'      };  }  /**接收传递过来的参数 */  componentDidMount(){      this.setState({          name : this.props.name      })  }  /**返回事件 */  _onBack(){    const { navigator } = this.props;    if(navigator) {       navigator.pop();    }  }  render(){        return (            <View style={styles.container}>                <Text>Hello.{this.state.name}</Text>                <TouchableOpacity style={styles.th} onPress={this._onBack.bind(this)}>                    <Text>点我返回</Text>                                    </TouchableOpacity>             </View>        )    }}