【RN】为项目使用React Navigation中的navigator

简言

移动应用基本不会只由一个页面组成。管理多个页面的呈现、跳转的组件就是我们通常所说的导航器(navigator)。
React Navigation 提供了简单易用的跨平台导航方案,在 iOS 和 Android 上都可以进行翻页式、tab 选项卡式和抽屉式的导航布局。
React Navigation 中的视图是原生组件,同时用到了运行在原生线程上的Animated动画库,因而性能表现十分流畅。此外其动画形式和手势都非常便于定制。

要想详细了解 React Navigation 的具体用法,请访问其React Navigation官网。

本篇是在window系统android环境下使用,mac系统请查看官网。

React Navigation

安装

官网安装指南Doc
核心包安装命令:

yarn add @react-navigation/native

除此之外,还要安装:

yarn add react-native-screens react-native-safe-area-context

react-native-screens 软件包需要一个额外的配置步骤才能在安卓设备上正常运行。编辑位于 android/app/src/main/java// 下的 MainActivity.kt 或 MainActivity.java 文件:
kotlin 类型

class MainActivity: ReactActivity() {// ...override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(null)}// ...
}

或者java类型

public class MainActivity extends ReactActivity {// ...@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(null);}// ...
}

添加好后,在顶部添加新依赖包语句声明:

import android.os.Bundle;

在这里插入图片描述

需要做出这一更改,以避免因视图状态无法在活动重启时持续保持而导致崩溃。

使用

我们需要用 NavigationContainer 封装整个应用程序。通常,您会在入口文件(如 index.js 或 App.js)中这样做:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';export default function App() {return (<NavigationContainer>{/* Rest of your app code */}</NavigationContainer>);
}

现在就可以正常运行了。

navigator

导航器 ,上面我们只是安装了React Navigation基础,并没有真正使用导航功能。
实现导航功能需要安装对应的navigator 才可以。
6.x版本的navigator 有以下几种:
在这里插入图片描述

Stack Navigator 堆栈导航器

堆栈导航器为您的应用程序提供了一种在屏幕间转换的方法,每个新屏幕都被放置在堆栈的顶部。
这种导航器和web的history stack比较相像。

虽然 @react-navigation/stack 可定制性极强,但它是用 JavaScript 实现的。虽然它可以使用本机运行动画和手势,但性能可能不如本机实现的快。

安装:

yarn add @react-navigation/stack

然后,需要安装和配置堆栈导航器所需的库:

yarn add react-native-gesture-handler

要最终完成 react-native-gesture-handler 的安装,请在入口文件(如 index.js 或 App.js)的顶部添加以下内容(确保它位于顶部,且之前没有其他内容)

import 'react-native-gesture-handler';

例子:

import { createStackNavigator } from '@react-navigation/stack';
import {Text,
} from 'react-native';
function Feed() {return <Text>top内容Feed</Text>;
}
function Settings() {return <Text>top内容Settings</Text>;
}
function Profile() {return <Text>top内容Profile</Text>;
}
const Stack = createStackNavigator();function MyStack() {return (<Stack.NavigatorinitialRouteName="Home"screenOptions={{headerMode: 'screen',headerTintColor: 'white',headerStyle: { backgroundColor: 'tomato' },}}><Stack.Screenname="Home"component={Home}options={{title: 'Awesome app',}}/><Stack.Screenname="Profile"component={Profile}options={{title: 'My profile',}}/><Stack.Screenname="Settings"component={Settings}options={{gestureEnabled: false,}}/></Stack.Navigator>);
}

Native Stack Navigator 原生堆栈导航器

导航器使用 iOS 上的 UINavigationController 和 Android 上的 Fragment 原生 API,因此使用 createNativeStackNavigator 构建的导航器将与基于这些 API 构建的应用程序具有完全相同的行为和性能特征。它还使用 react-native-web 提供基本的 Web 支持。

虽然 @react-navigation/native-stack 提供了原生性能并暴露了原生功能,如 iOS 上的大标题等,但它可能不如 @react-navigation/stack 可定制,这取决于您的需求。

安装:

yarn add @react-navigation/native-stack

例子:

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import {Text,
} from 'react-native';
function Feed() {return <Text>top内容Feed</Text>;
}
function Settings() {return <Text>top内容Settings</Text>;
}
function Profile() {return <Text>top内容Profile</Text>;
}
const Stack = createNativeStackNavigator();function MyStack() {return (<Stack.NavigatorinitialRouteName="Home"screenOptions={{headerTintColor: 'white',headerStyle: { backgroundColor: 'tomato' },}}><Stack.Screenname="Home"component={Home}options={{title: 'Awesome app',}}/><Stack.Screenname="Profile"component={Profile}options={{title: 'My profile',}}/><Stack.Screenname="Settings"component={Settings}options={{gestureEnabled: false,}}/></Stack.Navigator>);
}

Drawer Navigator 抽屉导航器

抽屉导航器在屏幕一侧显示一个导航抽屉,可通过手势打开或关闭。
在这里插入图片描述
安装:

yarn add @react-navigation/drawer
yarn add react-native-gesture-handler react-native-reanimated

要最终完成 react-native-gesture-handler 的安装,请在入口文件(如 index.js 或 App.js)的顶部(确保位于顶部,且之前没有其他内容)添加以下内容

import 'react-native-gesture-handler';

react-native-reanimated安装后,也要在babel.config.js上加下配置:

module.exports = {plugins: ['react-native-reanimated/plugin'],
};

不加在编译时会报react-native-reanimated相关的错误。

例子:

import { createDrawerNavigator } from '@react-navigation/drawer';
import {Text,
} from 'react-native';
function Feed() {return <Text>top内容Feed</Text>;
}
function Notifications() {return <Text>top内容Notifications</Text>;
}
function Profile() {return <Text>top内容Profile</Text>;
}
const Drawer = createDrawerNavigator();function MyDrawer() {return (<Drawer.Navigator initialRouteName="Feed"><Drawer.Screenname="Feed"component={Feed}options={{ drawerLabel: 'Home' }}/><Drawer.Screenname="Notifications"component={Notifications}options={{ drawerLabel: 'Updates' }}/><Drawer.Screenname="Profile"component={Profile}options={{ drawerLabel: 'Profile' }}/></Drawer.Navigator>);
}

Bottom Tabs Navigator 底部Tab导航器

屏幕底部有一个简单的标签栏,让你能在不同路线之间切换。路由是懒散初始化的,只有在首次聚焦时才会安装其屏幕组件。
安装:

yarn add @react-navigation/bottom-tabs

例子:

例子使用了react-native-vector-icons 图标库,使用前记得下载安装安装参考

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import {Text,
} from 'react-native';
function Feed() {return <Text>top内容Feed</Text>;
}
function Notifications() {return <Text>top内容Notifications</Text>;
}
function Profile() {return <Text>top内容Profile</Text>;
}
const Tab = createBottomTabNavigator();function MyTabs() {return (<Tab.NavigatorinitialRouteName="Feed"screenOptions={{tabBarActiveTintColor: '#e91e63',}}><Tab.Screenname="Feed"component={Feed}options={{tabBarLabel: 'Home',tabBarIcon: ({ color, size }) => (<MaterialCommunityIcons name="home" color={color} size={size} />),}}/><Tab.Screenname="Notifications"component={Notifications}options={{tabBarLabel: 'Updates',tabBarIcon: ({ color, size }) => (<MaterialCommunityIcons name="bell" color={color} size={size} />),tabBarBadge: 3,}}/><Tab.Screenname="Profile"component={Profile}options={{tabBarLabel: 'Profile',tabBarIcon: ({ color, size }) => (<MaterialCommunityIcons name="account" color={color} size={size} />),}}/></Tab.Navigator>);
}

Material Bottom Tabs Navigator

Material风格的底部标签导航器。
官网参考指南

Material Top Tabs Navigator

顶部标签导航器
安装:

yarn add @react-navigation/material-top-tabs react-native-tab-view
yarn add react-native-pager-view

例子:

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import {Text,
} from 'react-native';
function Feed() {return <Text>top内容Feed</Text>;
}
function Notifications() {return <Text>top内容Notifications</Text>;
}
function Profile() {return <Text>top内容Profile</Text>;
}
const Tab = createMaterialTopTabNavigator();function MyTabs() {return (<Tab.NavigatorinitialRouteName="Feed"screenOptions={{tabBarActiveTintColor: '#e91e63',tabBarLabelStyle: { fontSize: 12 },tabBarStyle: { backgroundColor: 'powderblue' },}}><Tab.Screenname="Feed"component={Feed}options={{ tabBarLabel: 'Home' }}/><Tab.Screenname="Notifications"component={Notifications}options={{ tabBarLabel: 'Updates' }}/><Tab.Screenname="Profile"component={Profile}options={{ tabBarLabel: 'Profile' }}/></Tab.Navigator>);
}

效果

在这里插入图片描述
在这里插入图片描述

结语

这几种navigator 可以随意嵌套使用,具体使用方法请到官方网站阅览。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/700057.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue2:路由命名

一、情景说明 我们使用router-link&#xff0c;配置path属性时&#xff0c;如果是多级路由&#xff0c;会写一个很长的path 如下代码&#xff1a; <!-- 跳转路由并携带query参数&#xff0c;to的对象写法 --> <router-link :to"{path:/home/message/detail,que…

c++ primer plus 编程答案 上

c primer plus 编程答案上 第二章第三章第四章第五章第六章 第二章 编写一个c程序&#xff0c;它显示您的姓名和地址 #include<iostream> int main() {using namespace std;cout << "my name is xxx,\nmy address is xxx" << endl;return 0; }编…

高防服务器和高防CDN有哪些区别?

高防服务器是独立单个防御50G以上的服务器类型&#xff0c;高防服务器能够为客户提供网络安全维护的服务器类型&#xff0c;是专门用来低于DDOS攻击的服务器&#xff0c;在硬件、软件和网络等方面能够提供可靠稳定的服务。 高防CDN则是一种基于分布式架构的网络加速和安全保护技…

如何在 Tomcat 中为 Web 应用程序启用和配置缓存?

在Tomcat中为Web应用程序启用和配置缓存通常涉及到对Tomcat的连接器&#xff08;Connector&#xff09;进行配置&#xff0c;以及可能的话&#xff0c;配置Web应用程序本身以支持缓存。 1. 配置Tomcat连接器以启用缓存 Tomcat的连接器可以通过其配置来启用各种…

解决错误:nested exception is org.apache.ibatis.binding.BindingException

mybatis报错信息&#xff1a; Error: nested exception is org.apache.ibatis.binding.BindingException: Parameter ‘categoryList’ not found. Available parameters are [arg0, collection, list] 网上搜到的解决办法&#xff1a; 一、多个参数使用Param注解标识 对于多个…

【Qt】Qt QML添加软件图标(Windows)

1. 准备图标文件 将图片转换成.ico文件&#xff0c;注意&#xff1a;需要用专门的工具转换&#xff08;https://convertio.co/zh/image-converter/&#xff09; 2. 工程配置 2.1 方法1 pro文件中添加&#xff1a; RC_ICONS AutoTitration.ico2.2 方法2 添加qrc文件&…

已解决org.springframework.beans.BeanInstantiationException异常的正确解决方法,亲测有效!!!

已解决org.springframework.beans.BeanInstantiationException异常的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 文章目录 问题分析 报错原因 解决思路 解决方法 步骤一&#xff1a;检查Bean定义 步骤二&#xff1a;检查Bean的依赖 步骤三…

C++中的构造函数

目录 前言 1.构造函数的作用 2.构造函数的定义 1.内联函数 2.类体外构造函数 前言 记录下C中的构造函数。 1.构造函数的作用 构造函数的作用主要是对对象的成员变量进行初始化赋值操作。 当我们没有定义构造函数的时候&#xff0c;系统会默认添加一个没有参数的构造函数…

软考-中级-系统集成2023年综合知识(三)

&#x1f339;作者主页&#xff1a;青花锁 &#x1f339;简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java微服务架构公号作者&#x1f604; &#x1f339;简历模板、学习资料、面试题库、技术互助 &#x1f339;文末获取联系方式 &#x1f4dd; 软考中级专栏回顾 专栏…

C#学习总结

1、访问权限 方法默认访问修饰符&#xff1a;private 类默认访问修饰符&#xff1a;internal 类的成员默认访问修饰符&#xff1a;private 2、UserControl的使用 首先添加用户控件 使用时一种是通过代码添加&#xff0c;一种是通过拖动组件到xaml中

Stable Diffusion 绘画入门教程(webui)-ControlNet(IP2P)

上篇文章介绍了深度Depth&#xff0c;这篇文章介绍下IP2P&#xff08;InstructP2P&#xff09;, 通俗理解就是图生图&#xff0c;给原有图加一些效果,比如下图&#xff0c;左边为原图&#xff0c;右边为增加了效果的图&#xff1a; 文章目录 一、选大模型二、写提示词三、基础参…

LeetCode146: LRU缓存

题目描述 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类&#xff1a; LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存 int get(int key) 如果关键字 key 存在于缓存中&#xff0c;则返回关键字的值&#xff0c;否则…

RabbitMQ的死信队列和延迟队列

文章目录 死信队列如何配置死信队列死信队列的应用场景Spring Boot实现RabbitMQ的死信队列 延迟队列方案优劣&#xff1a;延迟队列的实现有两种方式&#xff1a; 死信队列 1&#xff09;“死信”是RabbitMQ中的一种消息机制。 2&#xff09;消息变成死信&#xff0c;可能是由于…

绿盾限制终端网络访问权限会恢复后,别的网站访问正常就是无法访问钉钉网站和下载东西

环境&#xff1a; Win10 专业版 钉钉7.5.5 绿盾7.0 问题描述&#xff1a; 绿盾限制终端网络访问权限会恢复后&#xff0c;别的网站访问正常就是无法访问钉钉网站和下载东西 解决方案&#xff1a; 排查方法 1.重置浏览器或者更换浏览器测试&#xff08;未解决&#xff09…

【Java】输入输出流(实验八)

目录 一、实验目的 二、实验内容 三、实验小结 一、实验目的 1、掌握java I/O的基本原理。 2、掌握标准输入输出流和Scanner类的基本使用方法。 3、掌握FileInputStream、FileOutStream、FileReader、FileWriter、BufferedReader 、BufferedWriter类的常用方法。 二、实验…

VR系统的开发流程

虚拟现实&#xff08;Virtual Reality&#xff0c;VR&#xff09;系统是一种通过计算机技术模拟出的具有三维视角和交互性的虚拟环境&#xff0c;使用户能够沉浸在其中并与虚拟环境进行交互。这种技术通常利用头戴式显示器和手柄等设备&#xff0c;使用户能够感觉到仿佛身临其境…

【kubernetes】kubeadm部署k8s集群(3主3从+keepalived/nginx负载均衡高可用)

目录 一、完成系统初始化 步骤一&#xff1a;常规环境初始化 步骤二&#xff1a;内核版本升级以及内核限制文件参数修改 步骤三&#xff1a;提前准备好负载均衡器和keepalived(接着之前的二进制部署修改的) 二、所有节点部署docker&#xff0c;以及指定版本的kubeadm 步骤…

Mysql系列之命令行登录、连接工具登录、数据库表常用命令

登录与常用命令 连接工具登录命令行登录数据库1、查看数据库2、指定数据库3、查看当前数据库4、建库语句 数据表1、查看数据表2、查看表结构信息3、查看建表语句4、建表语句 连接工具登录 首先下载mysql连接工具&#xff0c;解压后直接打开软件&#xff0c;按以下步骤操作&…

CSS实现半边边框(只有边框的部分可见)

CSS实现半边边框&#xff08;只有边框的部分可见&#xff09; <div class"part box"><h1>内容</h1><!-- 绘出下面两个对角边框--><div class"part-footer"></div> </div>主要代码 .box {width: 100px;height:…

RabbitMq:什么是RabbitMq? ①

一、RabbitMq定位 RabbitMq是一个基于消息订阅发布的一款消息中间件。 二、技术原理 核心概念 server&#xff1a;又称broker&#xff0c;接受客户端连接&#xff0c;实现AMQP实体服务。缓存代理&#xff0c;Kafka集群中的一台或多台服务器统称broker.connection&#xff1a;…