前言

之前，通过官方文档，我们对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',@H_502_128@//这是navigationController的title。
          component:SearchScreen,@H_502_128@//注释：这里是要写的是相当于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;

React Native的Navigator详解

前言

Navigator和NavigatorIOS属性

Navigator

常用方法

Navigator.IOS

常用方法

常用属性

猜你在找的React相关文章