学习总结 ~ （二）React Native 初学 之 导航

导航

本文主要是实现ReactNative 的简单页面跳转

Navigator

---

 initialRoute = {{name: defaultName, component: defaultComponent }} 

• initialRoute指定了默认的页面，也就是启动的组件页面。
  这里填什么参数是自定义的，因为这个参数也是你自己发自己收, 自己在renderScene方法中处理

• configureScene：跳转动画的样式， 具体哪些样式写的时候可以点击进去每个都试试， 这里就不一一列举啦。

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

• navigationBar ：可选参数，提供一个在场景切换的时候保持的导航栏。

• navigator：可选参数，提供从父导航器获得的导航器对象。

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

** 不多说， 我就直接上代码好不啦：**

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

import FirstComponent from './FirstComponent';
// 引入当前目录下的FirstComponent.js文件 .js可以省略

class MyComponent extends Component {

render() {
let defaultName =' FirstComponent'; 
let defaultComponent = FirstComponent; 

return (

 { 
return Navigator.SceneConfigs.
HorizontalSwipeJumpFromLeft; 
}}

renderScene={(route, navigator) => {
// route包含的就是上面initialRoute传递过来的name和component， 
// 而navigator就是一个我们需要用的Navigator的对象，所以当我们拿到route中的component的时候，我们就可以将navigator传递给它，正因为如此，我们的组件MyPage才可以通过 this.props.navigator，拿到路由。

let Component = route.component; 
return 

// 这个语法是把 routes.params 里的每个key 作为props的一个属性:  
// 这是一个判断，如果传递进来的component存在，那我们就是返回一个这个component，结合前面 initialRoute 的参数，我们就是知道，这是一个会被render出来给用户看到的component，
// 然后navigator作为props传递给了这个component。 

   }}  

/> );

 }}

AppRegistry.registerComponent( 'MyProject', () => MyComponent);

*** FirstComponent 代码***

import React from 'react';
import {
View, Navigator, TouchableOpacity, Text
} from 'react-native';

import SecondPageComponent from './SecondPageComponent';

export default class FirstPageComponent extendsReact.Component {

constructor(props) {
super(props);
 this.state = {};
 }

_pressButton() {
const { navigator } = this.props;
//为什么这里可以取得props.navigator?请看上文: 
// 
//这里传递了navigator作为props

 if(navigator) {
navigator.push({
name: 'SecondPageComponent',
component: SecondPageComponent, 
params: {
id: this.state.id 
// 这里的 params.id 就变成了 
   
 点我跳转 
   
);
 }
}

补充一下其他方法：

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

NavigatorIOS

---

对于iOS 平台开发， 使用NavigatorIOS。它是基于UINavigationController封装的。
粗略的看了下Navigator和NavigatorIOS大致用法相同。文档中强调了要渲染的组件在路由对象的component指定，由passProps传递参数。目标组件会自动接收navigator的属性， 可以直接调用this.props.navigator的push方法和pop方法。
NavigatorIOS的好处是它是使用原生的UIKIt导航， 所以当它跳转的时候会向IOS一样自动渲染一个带有返回按钮的导航栏 而且还有标题哦 。

下面就来简单介绍下NavigatorIOS
的属性和方法啦：

• initialRoute {component: function, title: string, passProps: object, backButtonIcon: Image.propTypes.source, backButtonTitle: string, leftButtonIcon: Image.propTypes.source, leftButtonTitle: string, onLeftButtonPress: function, rightButtonIcon: Image.propTypes.source, rightButtonTitle: string, onRightButtonPress: function, wrapperStyle: [object Object]}：
  这个大家就一个个设置下看看效果吧， 就是设置导航栏或者导航栏的子试图的属性。

• barTintColor ：这个大家都知道啦...导航栏的背景色。

• tintColor :导航栏上按钮的颜色。

• titleTextColor : 导航栏标题文字的颜色。

• translucent ：导航栏是否有半透明效果（bool）。

• shadowHidden：（bool）
  是否隐藏导航栏底部那根线。

• navigationBarHidden：（bool） 导航栏是否隐藏。

• itemWrapperStyle：设置所有页面的背景色 。

• interactivePopGestureEnabled : （bool）
  是否启用左滑手势返回， 默认的时候根据导航栏是否隐藏来决定是否启用， 如果设置的话以设置为主。

• push(route) - 跳转到一个新的页面。

• pop() - 回到上一个页面。

• popN(n) - 回到N页之前。当N=1的时候，就和pop()一样啦。

• replace(route) - 替换当前页的路由，并立即加载新路由的视图。

• replacePrevious(route) - 替换上一页的路由/视图。

• replacePreviousAndPop(route) - 替换上一页的路由/视图，并且立刻反回上一页。

• resetTo(route) - 替换最顶级的路由并且跳回到它。

• popToRoute(route) - 反回到某个指定的路由。

• popToTop() - 回到最顶层的路由。

代码奉上：

import React, { Component, PropTypes } from 'react';
import {
AppRegistry,
NavigatorIOS, 
Text, 
TouchableOpacity
} from 'react-native';

class MyView extends Component {

_handleBackPress() {
this.props.navigator.pop(); 
}

_handleNextPress(nextRoute){
this.props.navigator.push(nextRoute);
 }

render() {
const nextRoute = {
component: MyView, 
title: '跳',
 passProps: { myProp: '跳' }
};

 return(
 this._handleNextPress(nextRoute)}> 
 See you on the other nav {this.props.myProp}!
 
  ); 
 }
}

class NavvyIOS extends Component {

_handleNavigationRequest() {
this.refs.nav.push({
component: MyView, 
title: '你要Add啥',
passProps: { myProp: 'Add' }, });
 }

render() {
return ( this._handleNavigationRequest(), 
}}
                   style={{flex: 1}}
                   barTintColor='#ffffcc' 
                   tintColor='#F55458' />
   ); 
  }
}
AppRegistry.registerComponent('MyProject', () => NavvyIOS);