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，用来一会儿实例化成 <Component />标签

第七行:

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>
        )
    }
}