【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 {
  // ...
  @Override
  protected 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.Navigator
      initialRouteName="Home"
      screenOptions={{
        headerMode: 'screen',
        headerTintColor: 'white',
        headerStyle: { backgroundColor: 'tomato' },
      }}
    >
      <Stack.Screen
        name="Home"
        component={Home}
        options={{
          title: 'Awesome app',
        }}
      />
      <Stack.Screen
        name="Profile"
        component={Profile}
        options={{
          title: 'My profile',
        }}
      />
      <Stack.Screen
        name="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.Navigator
      initialRouteName="Home"
      screenOptions={{
        headerTintColor: 'white',
        headerStyle: { backgroundColor: 'tomato' },
      }}
    >
      <Stack.Screen
        name="Home"
        component={Home}
        options={{
          title: 'Awesome app',
        }}
      />
      <Stack.Screen
        name="Profile"
        component={Profile}
        options={{
          title: 'My profile',
        }}
      />
      <Stack.Screen
        name="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.Screen
        name="Feed"
        component={Feed}
        options={{ drawerLabel: 'Home' }}
      />
      <Drawer.Screen
        name="Notifications"
        component={Notifications}
        options={{ drawerLabel: 'Updates' }}
      />
      <Drawer.Screen
        name="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.Navigator
      initialRouteName="Feed"
      screenOptions={{
        tabBarActiveTintColor: '#e91e63',
      }}
    >
      <Tab.Screen
        name="Feed"
        component={Feed}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Notifications"
        component={Notifications}
        options={{
          tabBarLabel: 'Updates',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="bell" color={color} size={size} />
          ),
          tabBarBadge: 3,
        }}
      />
      <Tab.Screen
        name="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.Navigator
      initialRouteName="Feed"
      screenOptions={{
        tabBarActiveTintColor: '#e91e63',
        tabBarLabelStyle: { fontSize: 12 },
        tabBarStyle: { backgroundColor: 'powderblue' },
      }}
    >
      <Tab.Screen
        name="Feed"
        component={Feed}
        options={{ tabBarLabel: 'Home' }}
      />
      <Tab.Screen
        name="Notifications"
        component={Notifications}
        options={{ tabBarLabel: 'Updates' }}
      />
      <Tab.Screen
        name="Profile"
        component={Profile}
        options={{ tabBarLabel: 'Profile' }}
      />
    </Tab.Navigator>
  );
}

效果

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

结语

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

防御第六次作业-防火墙综合实验（av、url过滤、dns过滤）

防御第六次作业-防火墙综合实验（av、url过滤、dns过滤）

目录 拓扑图&#xff1a; 要求&#xff1a; 8 9 10 11 拓扑图 要求 前7个要求在上一篇博客&#xff1b; 8.分公司内部的客户端可以通过域名访问到内部的服务器 9.假设内网用户需要通过外网的web服务器和pop3邮件服务器下载文件和邮件&#xff0c;内网的FTP服务器也需要…
阅读更多...
安装unget包 sqlsugar时报错，完整的报错解决

安装unget包 sqlsugar时报错，完整的报错解决

前置 .net6的开发环境 问题 ? 打开unget官网&#xff0c;搜索报错的依赖Oracle.ManagedDataAccess.Core unget官网 通过unget搜索Oracle.ManagedDataAccess.Core查看该依赖的依赖 发现应该是需要的依赖Oracle.ManagedDataAccess.Core(>3.21.100)不支持.net6的环境 解…
阅读更多...
加载arcgis切片服务网络请求有大量404错误

加载arcgis切片服务网络请求有大量404错误

需求&#xff1a; 前端访问arcgis切片服务时&#xff0c;在网络请求中出现大量404&#xff08;Not Found&#xff09;错误&#xff0c;切片时设置了感兴趣区域&#xff0c;在感兴趣范围内请求切片时能够正常返回切片。 问题分析&#xff1a; 设置感兴趣区域切片的目的是减少站…
阅读更多...
基于Mapbox展示GDAL处理的3D行政区划展示实践

基于Mapbox展示GDAL处理的3D行政区划展示实践

目录 前言 一、Gdal数据处理 1、数据展示 2、Java数据转换 二、Mapbox可视化 1、定义Mapbox地图 2、地图初始化 3、创建地图 三、界面优化 1、区域颜色设置 2、高度自适应和边界区分 3、中文标注 总结 前言 最近有遇到一个需求&#xff0c;用户想在地图上把行政区划…
阅读更多...
IP地理位置查询定位：技术原理与实际应用

IP地理位置查询定位：技术原理与实际应用

在互联网时代&#xff0c;IP地址是连接世界的桥梁&#xff0c;而了解IP地址的地理位置对于网络管理、个性化服务以及安全监控都至关重要。IP数据云将深入探讨IP地理位置查询定位的技术原理、实际应用场景以及相关的隐私保护问题&#xff0c;旨在为读者提供全面了解和应用该技术…
阅读更多...
海外媒体发稿：提高用户留存率的7个链游媒体宣发推广策略-华媒舍

海外媒体发稿：提高用户留存率的7个链游媒体宣发推广策略-华媒舍

在当今数字化时代&#xff0c;移动链游已经成为人们生活中不可或缺的一部分。随着链游市场日益竞争激烈&#xff0c;如何提高用户留存率成为了游戏开发者和媒体宣发人员需要面对的重要问题。本文将为您介绍7个有效的链游媒体宣发推广策略&#xff0c;帮助您提高用户留存率。 1.…
阅读更多...
Unity编辑器扩展之Text组件中字体替换工具

Unity编辑器扩展之Text组件中字体替换工具

想要批量化替换项目预制体资源中Text组件引用的Font字体文件&#xff0c;可以采用以下步骤。 1、在项目的Editor文件中&#xff0c;新建一个名为FontToolEditor的C#脚本文件&#xff0c;然后把以下代码复制粘贴到新建的FontToolEditor的C#脚本文件中。 using System.Collect…
阅读更多...
哪款护眼台灯适合孩子用？五大爆款选购指南分享

哪款护眼台灯适合孩子用？五大爆款选购指南分享

护眼台灯凭借各种好处让很多家长都为孩子选择。但是许多想要选择护眼台灯的家长们&#xff0c;各种台灯不能盲目入手&#xff0c;因为市面上存在各种生产实力不足&#xff0c;做工差&#xff0c;以及选材廉价等问题的劣质产品。那么护眼台灯要怎么选&#xff1f;关于这个问题&a…
阅读更多...
2024牛客寒假算法基础集训营4（视频讲解题目）

2024牛客寒假算法基础集训营4（视频讲解题目）

2024牛客寒假算法基础集训营4&#xff08;视频讲解题目&#xff09; 视频链接ABCDEFG、H&#xff08;下面是hard版本的代码两个都可以过&#xff09; 视频链接 2024牛客寒假算法基础集训营4&#xff08;视频讲解题目&#xff09; A #include<bits/stdc.h> #define en…
阅读更多...
在Win系统部署WampServer并实现公网访问本地服务【内网穿透】

在Win系统部署WampServer并实现公网访问本地服务【内网穿透】

目录 推荐 前言 1.WampServer下载安装 2.WampServer启动 3.安装cpolar内网穿透 3.1 注册账号 3.2 下载cpolar客户端 3.3 登录cpolar web ui管理界面 3.4 创建公网地址 4.固定公网地址访问 推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0…
阅读更多...
Windows系统安全策略设置之本地NTLM重放提权

Windows系统安全策略设置之本地NTLM重放提权

经安全部门研究分析&#xff0c;近期利用NTLM重放机制入侵Windows 系统事件增多&#xff0c;入侵者主要通过Potato程序攻击拥有SYSTEM权限的端口伪造网络身份认证过程&#xff0c;利用NTLM重放机制骗取SYSTEM身份令牌&#xff0c;最终取得系统权限&#xff0c;该安全风险微软并…
阅读更多...
vue3 用xlsx 解决 excel 低版本office无法打开问题

vue3 用xlsx 解决 excel 低版本office无法打开问题

需求背景解决思路解决效果将json导出为excel将table导为excel导出样式 需求背景 原使用 vue3-json-excel &#xff0c;导致在笔记本office环境下&#xff0c;出现兼容性问题 <vue3-json-excel class"export-btn" :fetch"excelGetList" :fields"js…
阅读更多...
国际贸易报关需要向海关提交哪些资料 | 全球数字贸易发展联盟 | 箱讯科技

国际贸易报关需要向海关提交哪些资料 | 全球数字贸易发展联盟 | 箱讯科技

1、进出口货物报关单。一般进口货物应填写一式二份;需要由海关核销的货物&#xff0c;如加工贸易货物和保税货物等&#xff0c;应填写专用报关单一式三份;货物出口后需国内退税的&#xff0c;应另填一份退税专用报关单。 2、货物发票。要求份数比报关单少一份&#xff0c;对货…
阅读更多...
OpenProject 安装迁移

OpenProject 安装迁移

文章目录 1、概要2、备份3、新服务器安装OpenProject4、新服务器安装Postgresql5、旧服务器数据转移到新服务器5.1、转移attachments附件5.2、转移conf配置文件5.3、转移存储库5.4、导入Postgres数据库 6、openproject配置 1、概要 注意&#xff1a;本文仅适用于 DEB/RPM 包安…
阅读更多...
高品质定制线缆厂家推荐：精工电联-打造智能智造的线缆解决方案（线缆定制流程）

高品质定制线缆厂家推荐：精工电联-打造智能智造的线缆解决方案（线缆定制流程）

高品质定制线缆厂家&#xff1a;精工电联-打造智能智造的线缆解决方案&#xff08;定制线缆定制流程&#xff09; 精工电联 在百年未有之大变局的当下&#xff0c;科技发展日新月异的今天&#xff0c;智能制造正在改变着各行各业的生产及人们的生活方式。作为线缆制造领域的领先…
阅读更多...
0220作业

0220作业

C语言实现LED1闪烁 led.h #ifndef __LED_H__ #define __LED_H__//RCC寄存器封装 #define RCC_MP_AHB4_ENSETR (*(volatile unsigned int*)0x50000A28) //寄存器封装//GPIO寄存器封装 typedef struct{volatile unsigned int MODER; //00volatile unsigned int OTYPER; //04vol…
阅读更多...
c++：蓝桥杯中的基础算法1（枚举，双指针）

c++：蓝桥杯中的基础算法1（枚举，双指针）

枚举 基础概念&#xff1a; 枚举&#xff08;Enum&#xff09;是一种用户定义的数据类型&#xff0c;用于定义一个有限集合的命名常量。在C中&#xff0c;枚举类型可以通过关键字enum来定义。 下面是一个简单的枚举类型的定义示例&#xff1a; #include <iostream>enum…
阅读更多...
Spring Bean 的生命周期了解么?

Spring Bean 的生命周期了解么?

Spring Bean 的生命周期基本流程 一个Spring的Bean从出生到销毁的全过程就是他的整个生命周期, 整个生命周期可以大致分为3个大的阶段 : 创建 使用 销毁 还可以分为5个小步骤 : 实例化(Bean的创建) , 初始化赋值, 注册Destruction回调 , Bean的正常使用 以及 Bean的销毁 …
阅读更多...
leetcode 105. 从前序与中序遍历序列构造二叉树【构造二叉树】

leetcode 105. 从前序与中序遍历序列构造二叉树【构造二叉树】

原题链接&#xff1a;105. 从前序与中序遍历序列构造二叉树 题目描述&#xff1a; 给定两个整数数组 preorder 和 inorder &#xff0c;其中 preorder 是二叉树的先序遍历&#xff0c; inorder 是同一棵树的中序遍历&#xff0c;请构造二叉树并返回其根节点。 输入输出描述&…
阅读更多...
ETL快速拉取物流信息

ETL快速拉取物流信息

我国作为世界第一的物流大国&#xff0c;但是在目前的物流信息系统还存在着几大的痛点。主要包括以下几个方面&#xff1a; 数据孤岛&#xff1a;有些物流企业各个部门之间的数据标准不一致&#xff0c;难以实现数据共享和协同&#xff0c;容易导致信息孤岛。 操作繁琐&#x…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站