React Native的Navigator详解
时间:2022-04-24
本文章向大家介绍React Native的Navigator详解,主要内容包括前言、Navigator和NavigatorIOS属性、Navigator.IOS、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
前言
之前,通过官方文档,我们对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;
- 设计模式之状态模式
- PDF.NET数据开发框架实体类操作实例(for PostgreSQL,并且解决自增问题) PDF.NET数据开发框架实体类操作实例(MySQL)
- 设计模式之代理模式
- 续谈ActiveMQ之java如何操作ActiveMQ(springBoot项目)
- 深入理解JVM原理之编译openjdk7
- 初识ActiveMQ
- Kafka集群安装
- 知其所以然之永不遗忘的算法
- ZOOKEEPER集群搭建及测试
- 【Python环境】Scikit-Learn:开源的机器学习Python模块
- 【Python环境】可爱的 Python: 自然语言工具包入门
- 电脑静音工作,又听不到12306的来票音乐,纠结啊 !但春节前工作多任务重,不能安心工作,就动手做个“无声购票弹窗”工具吧!
- .net访问PostgreSQL数据库发生“找不到函数名”的问题追踪
- “领域驱动开发”实例之旅(1)--不一样的开发模式 一、分析业务需求。 二、设计领域对象模型 三、测试领域对象模型 四、设计业务处理类 五、设计Entity和Vi
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 聊聊dubbo-go的forkingCluster
- 创建多线程的4种方式
- 线程通讯wait¬ify
- 最新深度学习框架——OneFlow:新分布式训练(附源代码)
- 多线程相关概念
- MySQL安装教程
- MapReduce之自定义OutputFormat
- 在TensorFlow中使用模型剪枝将机器学习模型变得更小
- 干货 | 滴滴 数据分析原来是这样做的!
- 数据链路层之PPP协议
- matplotlib基础绘图命令之boxplot
- MapReduce之GroupingComparator分组(辅助排序、二次排序)
- MySQL优化--概述以及索引优化分析
- MySQL优化--查询分析工具以及各种锁
- MySQL优化--MVCC