React Native的Navigator详解

前言

之前，通过官方文档，我们对Navigator简介。 在React Native开发中，官方推荐使用Navigator作为导航指示器，在早期的版本中ios/android中都使用Navigator作为通用导航栏，不过在在后来的版本中，由于Navigator对ios系统兼容较差，所以使用导航往往使用NavigatorIOS组件。

Navigator和NavigatorIOS属性

Navigator

Navigator设置方法: 初始化路由(initialRoute), 配置场景动画(configureScene), 渲染场景(renderScene)。如常见的：

class SimpleView extends Component {
  render() {
    return (
      <Navigator
        style={{flex:1}}
        initialRoute={{component: FirstPage}}
        configureScene={this.configureScene}
        renderScene={this.renderScene}/>
    );
  }
}

常用方法

• getCurrentRoutes() 该进行返回存在的路由列表信息
• jumpBack() 该进行回退操作 但是该不会卸载(删除)当前的页面
• jumpForward() 进行跳转到相当于当前页面的下一个页面
• jumpTo(route) 根据传入的一个路由信息，跳转到一个指定的页面(该页面不会卸载删除)
• push(route) 导航切换到一个新的页面中，新的页面进行压入栈。通过jumpForward()方法可以回退过去
• pop() 当前页面弹出来，跳转到栈中下一个页面，并且卸载删除掉当前的页面
• replace(route) 只用传入的路由的指定页面进行替换掉当前的页面
• replaceAtIndex(route,index) 传入路由以及位置索引，使用该路由指定的页面跳转到指定位置的页面
• replacePrevious(route) 传入路由，通过指定路由的页面替换掉前一个页面
• resetTo(route) 进行导航到新的界面，并且重置整个路由栈
• immediatelyResetRouteStack(routeStack) 该通过一个路由页面数组来进行重置路由栈
• popToRoute(route) 进行弹出相关页面，跳转到指定路由的页面，弹出来的页面会被卸载删除
• popToTop() 进行弹出页面，导航到栈中的第一个页面，弹出来的所有页面会被卸载删除

Navigator.IOS

NavigatorIOS包装了UIKit的导航功能，可以使用左划功能来返回到上一界面。

常用方法

• push(route) ：导航器跳转到一个新的路由。
• pop() ：回到上一页。
• popN(n) ：回到N页之前。当N=1的时候，效果和 pop() 一样。
• replace(route) ：替换当前页的路由，并立即加载新路由的视图。
• replacePrevious(route) ：替换上一页的路由/视图。
• replacePreviousAndPop(route) ：替换上一页的路由/视图并且立刻切换回上一页。
• resetTo(route) ：替换最顶级的路由并且回到它。
• popToRoute(route)： 一直回到某个指定的路由。
• popToTop() ：回到最顶层的路由。

常用属性

barTintColor : 导航条的背景颜色 initalRoute : 在RN 中导航名为“路由”（学过网络的应该明白这个词的意思）, 作用就是指路的，大家可以这么理解，这个属性是一个方法，用来初始化导航的。 itemWrapperStyle : 为每一项定制样式，例如设置每一个页面的背景颜色 navigationBarHidden : 为true , 隐藏导航栏。 shadowHidden : 是否隐藏阴影，true／false。 tintColor : 导航栏上按钮的颜色设置。 titleTextColor : 导航栏上字体的颜色 。 translucent : 导航栏是否是半透明的，true／false。 push(route) : 加载一个新的界面（视图或者路由）并且路由到该界面。 pop() : 返回到上一个页面。 popN(n) : 一次性返回N个界面，当n ＝ 1 时，即相当于pop（）方法的效果。 replace（route）：替换当前的路由。 replacePrevious(route) : 替换前一个页面的视图并且回退过去。 resetTo(route) : 取代最顶层的路由并且回退过去。 popToTop() : 回到最上层视图。 完整代码实例:

class NavigatorDemo extends Component {
  render() {
    return (
      <NavigatorIOS
        style={styles.container}
        initialRoute={{
          title:'movies',//这是navigationController的title。
          component:SearchScreen,//注释：这里是要写的是相当于iOS开发里navigationController的rootViewController页面。
        }}
      />

    );
  }
}

二级页面逻辑

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
class SearchScreen extends Component{
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>131231232
        </Text>
      </View>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    top:64,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});
module.exports = SearchScreen;