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

news2024/10/6 22:26:49

简言

移动应用基本不会只由一个页面组成。管理多个页面的呈现、跳转的组件就是我们通常所说的导航器（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.coloradmin.cn/o/1460319.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Android轻量级进程间通信Messenger源码分析

Android轻量级进程间通信Messenger源码分析

一. 概述 Android中比较有代表性的两大通信机制&#xff1a;1. 线程间Handler通信 2. 进程间Binder通信&#xff0c;本篇文章中我们在理解AIDL原理的基础上来解读一下Messenger的源代码&#xff0c; 并结合示例Demo加深理解。 在看本篇文章前&#xff0c;建议先查阅一下笔者的…
阅读更多...
51_蓝桥杯_独立按键

51_蓝桥杯_独立按键

一 电路 注意&#xff1a;J5跳帽接到2~3引脚&#xff0c;使按键S4-S5四个按键的另外一端接地&#xff0c;从而成为4个独立按键。 二 独立按键工作原理 三 代码 代码1&#xff1a;按下S7点亮L1指示灯&#xff0c;松开按键&#xff0c;指示灯熄灭&#xff0c;按下S6点亮L2指示灯…
阅读更多...
Spring Boot项目怎么对System.setProperty(key, value)设置的属性进行读取加解密

Spring Boot项目怎么对System.setProperty(key, value)设置的属性进行读取加解密

一、前言 之前我写过一篇文章使用SM4国密加密算法对Spring Boot项目数据库连接信息以及yaml文件配置属性进行加密配置&#xff08;读取时自动解密&#xff09;&#xff0c;对Spring Boot项目的属性读取时进行加解密&#xff0c;但是没有说明对System.setProperty(key, value)设…
阅读更多...
养生系列文章目录 - 心学和冥想融合实践

养生系列文章目录 - 心学和冥想融合实践

养生系列文章目录 文章目录 养生系列文章目录前言一、冥想方式二、早起床上冥想三、喝水冥想四、走路冥想四、坐地铁冥想五、写字冥想六、沟通冥想七、学习冥想八、听音乐冥想九、工作冥想十、跑步冥想十一、睡前冥想总结 前言 王阳明&#xff08;1472-1529&#xff09;是中国明…
阅读更多...
善于利用GPT确实可以解决许多难题

善于利用GPT确实可以解决许多难题

当我设计一个导出Word文档的功能时&#xff0c;我面临了一个挑战。在技术选型时&#xff0c;我选择了poi-tl这个模板引擎&#xff0c;因为在网上看到了很多关于它的推荐。poi-tl可以根据模板快速导出Word文档。虽然之前没有做过类似的功能&#xff0c;而且项目中也没有用过&…
阅读更多...
STM32F10X(Cortex-M3)系统定时器寄存器笔记和系统定时器精准延时函数

STM32F10X(Cortex-M3)系统定时器寄存器笔记和系统定时器精准延时函数

Cortex-M3系统定时器寄存器笔记和系统定时器精准延时函数 简介系统定时器寄存器STK_CTRLSTK_LOADSTK_VALSTK_CALIB STM32F10X(Cortex-M3)精准延时函数 简介 在STM32F10X(Cortex-M3)除了通用定时器和看门狗定时器外&#xff0c;还有一个系统定时器(SysTick) 拿STM32F103C8T6来说…
阅读更多...
SQL注入：网鼎杯2018-unfinish

SQL注入：网鼎杯2018-unfinish

目录 使用dirmap扫描 使用dirsearch扫描 使用acunetix扫描 爆破后端过滤的字符 绕过限制获取数据 这次的进行SQL注入的靶机是&#xff1a;BUUCTF在线评测 进入到主页面后发现是可以进行登录的&#xff0c;那么我们作为一个安全人员&#xff0c;那肯定不会按照常规的方式来…
阅读更多...
企业必备！助你有效防止员工私删客户微信？

企业必备！助你有效防止员工私删客户微信？

在企业管理中&#xff0c;保护客户资源和数据安全至关重要&#xff0c;特别是在微信这样的沟通工具中。为了有效防止员工私删客户微信以及滥用工作微信&#xff0c;企业可以借助一些专业的工具——微信管理系统来进行监控和管理。 首先&#xff0c;企业可以在微信管理系统上给…
阅读更多...
CSS基础属性

CSS基础属性

【三】基础属性 【1】高度和宽度 &#xff08;1&#xff09;参数 width&#xff08;宽度&#xff09;&#xff1a;用于设置元素的宽度。可以使用具体的数值&#xff08;如像素值&#xff09;或百分比来指定宽度。 height&#xff08;高度&#xff09;&#xff1a;用于设置元…
阅读更多...
【JGit】分支管理实践

【JGit】分支管理实践

本文紧接【JGit】简述及学习资料整理。 以下梳理了使用 JGit 进行 Git 操作的实践 JGit实践 主函数 public static void main(String[] args) throws Exception {String localDir "D:\\tmp\\git-test\\";String gitUrl "http://192.168.181.1:3000/root/g…
阅读更多...
如何合理规划PCB叠层

如何合理规划PCB叠层

目录 引言 6层板叠层设计方案 8层板叠层设计方案 10层板叠层设计方案 12层板叠层设计方案 总结 引言 PCB叠层是决定电子产品EMC性能的关键因素，合理的叠层布局，可以使得PCB上的差模和共模辐射最小化，反之，则可能放大这些辐射的干扰。 通常会从以下的因素中，对PCB的叠…
阅读更多...
图扑数字孪生“光储充”一体化智慧充电站

图扑数字孪生“光储充”一体化智慧充电站

近年来&#xff0c;蔚来、理想、特斯拉等电动汽车凭借独特的优势已成为全球消费者的“新宠儿”。随着新能源车保有量迅速增长&#xff0c;充电需求不断上升&#xff0c;充电桩对区域电网的冲击也日益显著。 “光储充”一体化模式&#xff0c;即“光伏储能汽车充电”&#xff0…
阅读更多...
关于Windows 10中剪贴板的知识，看这篇文章就差不多了

关于Windows 10中剪贴板的知识，看这篇文章就差不多了

本文介绍了如何在Windows10中使用剪贴板。除了有关复制、粘贴和清除剪贴板的信息外&#xff0c;还包括有关将项目固定到剪贴板的信息。 如何将内容复制到Windows 10剪贴板 Windows 10操作系统中的剪贴板比以前的剪贴板体验更先进。使用新的剪贴板&#xff0c;你可以查看复制到…
阅读更多...
fastApi笔记04-查询参数和字符串校验

fastApi笔记04-查询参数和字符串校验

额外校验 使用Query可以对查询参数添加校验 from typing import Unionfrom fastapi import FastAPI, Queryapp FastAPI()app.get("/items/") async def read_items(q: Union[str, None] Query(defaultNone, max_length50)):results {"items": [{"…
阅读更多...
【力扣hot100】刷题笔记Day8

【力扣hot100】刷题笔记Day8

前言 到了大章节【链表】了&#xff0c;争取两三天给它搞定&#xff01;&#xff01; 160. 相交链表 - 力扣&#xff08;LeetCode&#xff09;】 双指针 参考题解&#xff0c;相比于求长度右对齐再一起出发的方法简洁多了 class Solution:def getIntersectionNode(self, head…
阅读更多...
zabbix5.0利用percona监控MySQL

zabbix5.0利用percona监控MySQL

具体来说包括: Percona Monitoring Plugins 这是一组用于收集MySQL实例各种性能指标和状态的插件脚本,包括: mysqld_stats.pl - 收集服务器状态计数器mysqld_statement_replay.pl - 进行负载模拟测试pt-status - 收集InnoDB资源使用情况等 Percona Templates 基于这些插件收集…
阅读更多...
gitlab 项目上线，项目上线后回滚

gitlab 项目上线，项目上线后回滚

gitlab 项目上线&#xff0c;项目上线后回滚 1.需要自己有个gitlab项目环境&#xff0c;没有找我&#xff0c;docker-compose 一键环境启动 2.发起合并请求3.选择合并的分支4.点击创建合并&#xff0c;然后确认合并合并完成&#xff0c;进行回滚操作&#xff0c;在合并详情页…
阅读更多...
wo-gradient-card是一款采用uniapp实现的透明辉光动画卡片

wo-gradient-card是一款采用uniapp实现的透明辉光动画卡片

采用uniapp-vue3实现&#xff0c;透明辉光动画卡片&#xff0c;卡片内容包含标签、标题、副标题、图片 支持H5、微信小程序&#xff08;其他小程序未测试过&#xff0c;可自行尝试&#xff09; 可用于参考学习 可到插件市场下载尝试&#xff1a; https://ext.dcloud.net.cn/plu…
阅读更多...
仿12306校招项目-前后端运行

仿12306校招项目-前后端运行

目录 1.git 克隆 2.设置JDK版本 3.sql脚本导入数据 4.启动中间件 5.运行后端 6.运行前端 1.git 克隆 打开 IntelliJ IDEA&#xff0c;菜单栏顶部找到 Git -> Clone 选项。找到 Clone 这个按钮输入 gitgitee.com:nageoffer/12306.git或者https://gitee.com/nageoffer/…
阅读更多...
什么是企业数字化转型的关键要素？

什么是企业数字化转型的关键要素？

企业数字化转型的关键要素通常包括以下几个方面&#xff1a; 战略规划&#xff1a;企业需要制定清晰的数字化转型战略&#xff0c;明确转型的目标、路径和时间表&#xff0c;确保数字化转型与企业整体战略相一致&#xff0c;为企业提供明确的指导。 数据驱动&#xff1a;数据是…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023