【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,一经查实,立即删除!

相关文章

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

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

软考-中级-系统集成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; 文章目录 一、选大模型二、写提示词三、基础参…

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;…

工作中常见问题总结

工作中常见错误清单 1、springboot实现无数据库启动 问题 springboot往往是作为b/s系统的server端的架子来使用&#xff0c;但是有些时候&#xff0c;是作为静默的server&#xff0c;并没有界面和数据库&#xff0c;但是springboot默认是链接数据库的&#xff0c;如何解决这个…

2024年初中生古诗文大会备考:选择题往年真题练习和解析

今天我们继续来做初中古诗文大会的选择题真题&#xff0c;让大家了解初中生古诗文大会的考察内容&#xff0c;并且提供了我独家的题目解析和答案&#xff0c;供孩子们参考。 Tips&#xff1a;通过对古诗文大会题目的解析发现&#xff0c;古诗文大会的许多题目都来自于中考、高…

Druid无法登录监控页面

问题表现&#xff1a;在配置和依赖都正确的情况下&#xff0c;无法通过配置的用户名密码登录Druid的监控页面 检查配置发现 配置的用户名和密码和请求中参数是一致的&#x1f914; Debug发现 ResourceServlet 是Druid的登录实现&#xff0c; 且调试发现usernameParam是null&am…

python程序设计基础:字符串与正则表达式

第四章&#xff1a;字符串与正则表达式 4.1字符串 最早的字符串编码是美国标准信息交换码ASCII&#xff0c;仅对10个数字、26个大写英文字母、26个小写英文字母及一些其他符号进行了编码。ASCII码采用1个字节来对字符进行编码&#xff0c;最多只能表示256个符号。 随着信息技…

【数据结构与算法初学者指南】【冲击蓝桥篇】String与StringBuilder的区别和用法

&#x1f389;&#x1f389;欢迎光临&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;特别推荐给大家我的最新专栏《数据结构与算法&#xff1a;初学者入门指南》&#x1f4d8;&am…

docker打包当前dinky项目

以下是我的打包过程&#xff0c;大家可以借鉴。我也是第一次慢慢摸索&#xff0c;打包一个公共项目&#xff0c;自己上传。 如果嫌麻烦&#xff0c;可以直接使用我的镜像&#xff0c;直接跳到拉取镜像&#xff01; <可以在任何地方的服务器进行拉取> docker打包当前din…

LLMs之Gemma:Gemma(Google开发的新一代领先的开源模型)的简介、安装、使用方法之详细攻略

LLMs之Gemma&#xff1a;Gemma(Google开发的新一代领先的开源模型)的简介、安装、使用方法之详细攻略 导读&#xff1a;此文章介绍了Google推出的新一代开源模型Gemma&#xff0c;旨在帮助研发人员负责任地开发AI。 背景&#xff1a; >> Google长期致力于为开发者和研究人…

Vue(学习笔记)

什么是Vue Vue是一套构建用户界面的渐进式框架 构建用户界面&#xff1a; 基于数据渲染出用户可以看到的界面 渐进式&#xff1a; 所谓渐进式就是循序渐进&#xff0c;不一定非得把Vue中的所有API都学完才能开发Vue&#xff0c;可以学一点开发一点 创建Vue实例 比如就上面…