React Native的Navigator详解

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://xiangzhihong.blog.csdn.net/article/details/54382409

前言

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

Navigator和NavigatorIOS属性

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() 进行弹出页面,导航到栈中的第一个页面,弹出来的所有页面会被卸载删除

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;
展开阅读全文

没有更多推荐了,返回首页