React-Native之Navigator

导航器（Navigator）

一、引入Navigator库

在0.43以前我们是可以直接从'react-native'包中引入，但是在0.43之后如果直接从'react-native'中引入Navigator的话会直接报一个错误：

Navigator is deprecated and has been removed from this package. It can now be installed and import from ‘react-native-deprecated-custom-components’ instead of ‘react-native’

表示已经被从'react-native'中移除。并提示我们需要导入'react-native-deprecated-custom-components'这个包才能引用。
解决方案：
（1）用终端cd到当前项目的根目录下；
（2）输入命令：npm install react-native-deprecated-custom-components --save
（3）引入Navigator库：import { Navigator } from 'react-native-deprecated-custom-components'

二、配置导航器

• step 1：设置路由对象（initialRoute）
  这个指定了默认的页面，也就是启动APP之后会看到的界面的第一屏。对象的属性是自定义的，这个对象的内容会在renderScence方法中处理。且路由对象必须包含component，即需要渲染的页面组件。

  initialRoute={rootRoute}
  

• step 2： 场景渲染的配置（configureScene）

  configureScene={(route)=> {
     return Navigator.SceneConfigs.PushFromRight;
  }}
  

• step 3： 渲染场景（renderScence）
  参数：route(第一步创建并设置给导航器的路由对象)，navigator(导航器对象)
  实现：给需要显示的组件设置属性

  renderScene={(route, navigator) => {
     // 从route对象中获取页面组件
     var Component = route.component;
     return (
         <Component
           navigator={navigator}
           route={route}
         />
     );
  }}
  

三、代码实现

• 创建FirstPage类

import React, { Component } from 'react';
import {
  View,
  Text,
  AppRegistry,
  StyleSheet,
  TouchableOpacity
} from 'react-native';

/*引入SecondPage类*/
var SecondPage = require('./SecondPage');

var FirstPage = React.createClass({
  
  /*按钮触发方法，跳转到SecondPage界面*/
  pressPush: function() {
    var nextRoute = {
      component: SecondPage,
      /*传值*/
      passProps: {
          message: '我是传到SecondPage的message'
      }
    };
    this.props.navigator.push(nextRoute)
  },

  render() {
    return(
      <View style={styles.containerView}>
        <TouchableOpacity
          style={styles.clickItemStyle}
          onPress={this.pressPush}
        >
          <Text> 点击跳转打下一个界面 </Text>
        </TouchableOpacity>
      </View>
    )
  }
});

var styles = StyleSheet.create({
  containerView: {
    flex: 1,
    backgroundColor: "cyan",
    justifyContent: 'center',
    alignItems: 'center',
  },

  clickItemStyle: {
    width: 200,
    height: 30,
    borderColor: 'red',
    borderWidth: 1,
    borderRadius: 5,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

// 输出类
module.exports = FirstPage;

• 创建SecondPage类

import React, { Component } from 'React';
import {
  AppRegistry,
  StyleSheet,
  View,
  Text,
  TouchableOpacity
} from 'react-native';


var SecondPage = React.createClass({

  pressPop: function() {
    this.props.navigator.pop();
  },

  render() {
    return(
      <View style={styles.containerView}>
        <Text> {this.props.message} </Text>
        <TouchableOpacity
          style={styles.itemstyle}
          onPress={this.pressPop}
        >
          <Text> 点击跳回上一界面 </Text>
        </TouchableOpacity>
      </View>
    )
  }
});

var styles = StyleSheet.create({
  containerView: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'yellow',
  },
  itemstyle: {
    width: 200,
    height: 30,
    borderColor: 'red',
    borderWidth: 1,
    borderRadius: 5,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

module.exports = SecondPage;

• 设置导航器

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

import { Navigator } from 'react-native-deprecated-custom-components'

var FirstPage = require('./FirstPage');

var LessonNavigator = React.createClass({
  render() {
    /* 创建路由对象 */
    var rootRoute = {
      component: FirstPage
    };

    return(
      <Navigator
        /*1.设置路由对象
          initialRoute

          这个指定了默认的页面，也就是启动APP之后会看到的界面的第一屏。
          对象的属性是自定义的，这个对象中的内容会在renderScence方法中处理。

          备注：必须包含的属性，即component，表示需要渲染的页面组件
        */
        initialRoute={rootRoute}

        /*
          2.configureScene
          场景渲染的配置
        */
          configureScene={(route)=> {
            return Navigator.SceneConfigs.PushFromRight;
          }}

          /*
            3.renderScence
            渲染场景

            参数：route(第一步创建并设置给导航器的路由对象)，navigator(导航器对象)
            实现：给需要显示的组件设置属性
          */

          renderScene={(route, navigator) => {
            // 从route对象中获取页面组件
            var Component = route.component;
            return (
              <Component
                navigator={navigator}
                route={route}
                /*传值*/
                {...route.passProps}
              />
            );
          }}
      />
    )
  }
})

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#4c4c4c',
  },
});

AppRegistry.registerComponent('LessonNavigator', () => LessonNavigator);