当前位置: 首页 > news >正文

react-navigation:

我的仓库地址:https://gitee.com/ruanjianbianjing/bj-hybrid

react-navigation:

学习文档:https://reactnavigation.org

安装核心包:

npm install @react-navigation/native

安装@react-navigation/native本身依赖的相关包:

  • react-native-screens:使用原生代码实现screen容器可以提高性能流畅度
  • react-native-safe-area-context:可以让我们的组件渲染在一个安全的区域(比如有些移动设备是异性的,刘海屏、挖孔屏等)
npx expo install react-native-screens react-native-safe-area-context
npm install @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs

入口文件(我的是App.js)引入NavigationContainer
 

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

小图标:
网址:https://icons.expo.fyi/Index

引入方式:

@expo/vector-icons

//举个例子
import { Ionicons } from "@expo/vector-icons";

如何使用堆栈导航器:

安装核心库:
npm install @react-navigation/stack  

目录结构:(创建Home和Detail)

home组件:

import { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';const Home = ({navigation}) => {const goDetail = () => {navigation.navigate('detail', { data: 'pass data' })}return (<View style={{flex: 1}}><Button title='to detail'onPress={goDetail('detail')}/></View>)
}
const styles = StyleSheet.create({});
export default Home

Getail组件:

import React from "react";
import { Text } from "react-native";const Detail = () => {return (<div><Text>详情eee</Text></div>);
};export default Detail;

App.js
 

import { StatusBar, Text, StyleSheet, View } from "react-native";
import "./global";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack"; //堆栈导航器
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
//page下的组件
import Home from "./src/page/Home";
import Detail from "./src/page/Detail";
//两个小图标
import { AntDesign } from "@expo/vector-icons";
import { Ionicons } from "@expo/vector-icons";const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
//Screen路由,也是页面
//Navigator导航器export default function App() {return (<NavigationContainer><Tab.Navigator>{/* 首页 */}<Tab.Screen name="homeScreen" component={HomeScreen} />{/* 个人中心页 */}<Tab.Screen name="setting" component={Setting} /></Tab.Navigator><StatusBar /></NavigationContainer>);
}const styles = StyleSheet.create({
});

页面之间实现跳转:

在`Home`组件中,您可以添加一个按钮或者其他交互元素,然后在点击事件中使用`navigation.navigate`方法来进行页面跳转:


import { Button } from 'react-native';

const Home = ({ navigation }) => {
  return (
    <View>
      <Button 
        title="Go to Detail Page" 
        onPress={() => navigation.navigate('detail')} 
      />
    </View>
  );
};


在上面的示例中,当点击按钮时,会调用`navigation.navigate('detail')`来跳转到`Detail`页面。

下面是代码展示:

import { StatusBar, Text, StyleSheet, View } from "react-native";
// import Home from './src/page/Home';
import "./global";
import { getFocusedRouteNameFromRoute } from "@react-navigation/native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack"; //堆栈导航器
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Home from "./src/page/Home";
import Detail from "./src/page/Detail";
import { AntDesign } from "@expo/vector-icons";
import { Ionicons } from "@expo/vector-icons";const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();const HomeScreen = () => {return (<Stack.Navigator><Stack.Screenname="home"component={Home}options={{title: "首页",tarBarIcon: ({ color, size }) => (<AntDesign name="home" size={size} color={color} />),}}/><Stack.Screen name="detail" component={Detail} /></Stack.Navigator>);
};export default function App() {return (<NavigationContainer><Tab.NavigatorscreenOptions={{headerShown: false,}}><Tab.Screenname="homeScreen"component={HomeScreen}options={{title: "首页",tabBarIcon: ({ color, size }) => (<Ionicons name="home" size={size} color={color} />),}}/><Tab.Screen name="setting" component={Setting} /></Tab.Navigator><StatusBar /></NavigationContainer>);
}const styles = StyleSheet.create({});

tips:

headerMode="none"没有标题栏

headerMode="screen"每个页面都有一个标题栏(Android的默认)

使用headerStyle
 

import { StatusBar, Text, StyleSheet, View } from "react-native";
// import Home from './src/page/Home';
import "./global";
import { getFocusedRouteNameFromRoute } from "@react-navigation/native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack"; //堆栈导航器
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Home from "./src/page/Home";
import Detail from "./src/page/Detail";
import { AntDesign } from "@expo/vector-icons";
import { Ionicons } from "@expo/vector-icons";const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();const HomeScreen = () => {return (<Stack.NavigatorscreenOptions={{headerStyle: {backgroundColor: "#f4511e",},headerTitleAlign: "center",headerTintColor: "#fff",headerTitleStyle: {fontWeight: "bold",},}}><Stack.Screenname="home"component={Home}options={{title: "首页",tarBarIcon: ({ color, size }) => (<AntDesign name="home" size={size} color={color} />),}}/><Stack.Screen name="detail" component={Detail} /></Stack.Navigator>);
};const Setting = () => <Text>设置页面</Text>;export default function App() {return (<NavigationContainer><Tab.NavigatorscreenOptions={{headerShown: false,}}><Tab.Screenname="homeScreen"component={HomeScreen}options={{title: "首页",tabBarIcon: ({ color, size }) => (<Ionicons name="home" size={size} color={color} />),}}/><Tab.Screen name="setting" component={Setting} /></Tab.Navigator><StatusBar /></NavigationContainer>);
}const styles = StyleSheet.create({});

页面跳转之间传参,还有隐藏下方的小图标:

import { StatusBar, Text, StyleSheet, View } from "react-native";
// import Home from './src/page/Home';
import "./global";
import { getFocusedRouteNameFromRoute } from "@react-navigation/native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack"; //堆栈导航器
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Home from "./src/page/Home";
import Detail from "./src/page/Detail";
import { AntDesign } from "@expo/vector-icons";
import { Ionicons } from "@expo/vector-icons";const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();const HomeScreen = () => {return (<Stack.NavigatorscreenOptions={{headerStyle: {backgroundColor: "#f4511e",},headerTitleAlign: "center",headerTintColor: "#fff",headerTitleStyle: {fontWeight: "bold",},}}><Stack.Screenname="home"component={Home}options={{title: "首页",tarBarIcon: ({ color, size }) => (<AntDesign name="home" size={size} color={color} />),}}/><Stack.Screen name="detail" component={Detail} /></Stack.Navigator>);
};const Setting = () => <Text>设置页面</Text>;
// 变量
const screens = ["home", "set", "useinfo"];// tabbar是否要显示
const tabbarIsVisible = (route) => {const routeName = getFocusedRouteNameFromRoute(route);// console.log(routeName);return screens.includes(routeName);
};
export default function App() {return (<NavigationContainer><Tab.NavigatorscreenOptions={{headerShown: false,}}><Tab.Screenname="homeScreen"component={HomeScreen}options={// 让options返回函数({ route }) => {//   console.log(route);// 这是一个函数,需要引入,把它移动到上面的tabbarIsVisible函数里面// const routeName = getFocusedRouteNameFromRoute(route);return {// 这行以下是非函数的title: "首页",tabBarIcon: ({ color, size }) => (<Ionicons name="home" size={size} color={color} />),// 每个tab项有一个自己的属性tabBarStyle: {//   display: routeName !== "home" ? "none" : "block",// 换成函数调用display: tabbarIsVisible(route) ? "block" : "none",},};}}/><Tab.Screen name="setting" component={Setting} /></Tab.Navigator><StatusBar /></NavigationContainer>);
}const styles = StyleSheet.create({});

最终效果展示:(视频地址)
https://www.bilibili.com/video/BV1ZJ4m1L7ED/?vd_source=49ac986e62578cbc7593a58345567513

相关文章:

react-navigation:

我的仓库地址&#xff1a;https://gitee.com/ruanjianbianjing/bj-hybrid react-navigation&#xff1a; 学习文档&#xff1a;https://reactnavigation.org 安装核心包: npm install react-navigation/native 安装react-navigation/native本身依赖的相关包: react-nativ…...

nginx负载均衡模式

轮询 (Round Robin) 用法&#xff1a;这是Nginx默认的负载均衡策略。每个请求会按顺序分配给upstream中的后端服务器&#xff0c;即按照配置的服务器列表顺序依次分配。 upstream backend {server backend1.example.com;server backend2.example.com;server backend3.example.…...

手写简易操作系统(十七)--编写键盘驱动

前情提要 上一节我们实现了锁与信号量&#xff0c;这一节我们就可以实现键盘驱动了&#xff0c;访问键盘输入的数据也属于临界区资源&#xff0c;所以需要锁的存在。 一、键盘简介 之前的 ps/2 键盘使用的是中断驱动的&#xff0c;在当时&#xff0c;按下键盘就会触发中断&a…...

springboot中基于RestTemplate 类 实现调用第三方API接口【POST版本】

https://blog.csdn.net/Drug_/article/details/135111675 这一篇的升级版 还是先配置文件 package com.init.config;import org.apache.http.conn.ssl.NoopHostnameVerifier; import org.apache.http.conn.ssl.SSLConnectionSocketFactory; import org.apache.http.impl.clie…...

编程器固件修改教程

首发csdn&#xff0c;转载请说明出处&#xff0c;保留一切权益。 关于编程器固件 所谓编程器固件是用编程器读取嵌入式设备的FLASH存储数据生成的文件&#xff0c;类似于直接用工具复制整个硬盘 编程器固件与普通固件的差异 编程器固件是用特定的结构(按顺序、大小)将一些文件系…...

Python从原Excel表中抽出数据存入同一文件的新的Sheet(附源码)

python读取excel数据。Python在从原Excel表中抽出数据并存储到同一文件的新的Sheet中的功能&#xff0c;充分展示了其在数据处理和自动化操作方面的强大能力。这一功能不仅简化了数据迁移的过程&#xff0c;还提高了数据处理的效率&#xff0c;为数据分析和管理工作带来了极大的…...

计算机网络实验六:路由信息协议RIP

目录 6 实验六:路由信息协议RIP 6.1 实验目的 6.2 实验步骤 6.2.1 构建网络拓扑、配置各网络设备 6.2.2 网络功能验证测试 6.3 实验总结 6 实验六:路由信息协议RIP 6.1 实验目的 (1)学习RIP协议的工作原理和特点 (2)学习如何选择最短路径路由。 (3)进一步掌握…...

MySQL数据库备份策略与实践详解

目录 引言 一、MySQL数据库备份的重要性 &#xff08;一&#xff09;数据丢失的原因 &#xff08;二&#xff09;数据丢失的后果 二、MySQL备份类型 &#xff08;一&#xff09;根据数据库状态 &#xff08;二&#xff09;根据数据的完整性 &#xff08;三&#xff09;…...

String类相关oj练习

前言&#xff1a; 此处练习对应博客文章&#xff1a;公主&#xff0c;王子&#xff0c;请点击​​​​​​​ 1.第一次只出现一次的字符 做题首先看清要求和提示&#xff1a; 给定一个字符串 s &#xff0c;找到 它的第一个不重复的字符&#xff0c;并返回它的索引 。如果不…...

【Linux】进程实践项目 —— 自主shell编写

送给大家一句话&#xff1a; 不管前方的路有多苦&#xff0c;只要走的方向正确&#xff0c;不管多么崎岖不平&#xff0c;都比站在原地更接近幸福。 —— 宫崎骏《千与千寻》 自主shell命令编写 1 前言2 项目实现2.1 创建命令行2.2 获取命令2.3 分割命令2.4 运行命令 3 源代码…...

基于SpringBoot和Vue的学生笔记共享平台的设计与实现

今天要和大家聊的是一款基于SpringBoot和Vue的学生笔记共享平台的设计与实现 &#xff01;&#xff01;&#xff01; 有需要的小伙伴可以通过文章末尾名片咨询我哦&#xff01;&#xff01;&#xff01; &#x1f495;&#x1f495;作者&#xff1a;李同学 &#x1f495;&…...

C++心决之命名空间、重载函数和引用

目录 1. C关键字(C98) 2. 命名空间 2.1 命名空间定义 2.2 命名空间使用 3. C输入&输出 4. 缺省参数 4.1 缺省参数概念 4.2 缺省参数分类 5. 函数重载 5.1 函数重载概念 5.2 C支持函数重载的原理--名字修饰(name Mangling) 6. 引用 6.1 引用概念 6.2 引用特性…...

higress使用了解

higress使用了解 了解下 http-echo、httpbin 镜像使用 未按文档实际搭建&#xff0c;但大致是这样 官方文档&#xff1a;https://higress.io/zh-cn/docs/overview/what-is-higress 了解&#xff1a;利用sealos快速安装kubernetes集群&#xff1a;https://note.youdao.com/s…...

Swagger3探索之游龙入海

引言 后端开发中常用的接口调用工具一般使用Postman、ApiPost工具&#xff0c;但后期需要与前端联调&#xff0c;要补充接口文档花费大量时间&#xff0c;此时Swagger3应运而生&#xff0c;大大提高沟通交流的效率。 引用依赖 <!-- Swagger3 调用方式 http://ip:port/swa…...

javaWeb项目-学生考勤管理系统功能介绍

项目关键技术 开发工具&#xff1a;IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7 框架&#xff1a;ssm、Springboot 前端&#xff1a;Vue、ElementUI 关键技术&#xff1a;springboot、SSM、vue、MYSQL、MAVEN 数据库工具&#xff1a;Navicat、SQLyog 1、JAVA技术 JavaSc…...

云备份项目认识、环境搭建以及所使用的库的介绍

一、云备份认识 将本地计算机一个受监管的文件夹的文件上传到服务器中&#xff0c;有服务器组织&#xff0c;客户端可以通过网页将文件查看并且下载下来&#xff0c;下载过程支持断点续传功能&#xff0c;并且服务器会对上传的文件进行热点管理&#xff0c;长时间没人访问的文…...

汇编语言第四版-王爽第2章 寄存器

二进制左移四位&#xff0c;相当于四进制左移一位。 debug命令实操&#xff0c;win11不能启动&#xff0c;需要配置文件 Windows64位系统进入debug模式_window10系统64位怎么使用debugger-CSDN博客...

MoonBit MeetUp回顾——张正、宗喆:编程语言在云原生与区块链领域的技术探索

宗喆和张正分别给我们带了 KCL 相关的最新进展&#xff0c;由蚂蚁集团开发的 Rust 编写的开源 DSL&#xff0c;目标是优化云原生策略配置和用户体验。它通过引入动态配置管理、配置校验和基础设施抽象等核心概念&#xff0c;解决开发者认知负担、配置膨胀和标准化工具缺乏的问题…...

云原生靶场kebernetesGoat、Metarget

靶场 文章目录 靶场kebernetesGoat靶场安装Docker in DockerSSRF漏洞容器逃逸到主系统Docker CIS 基线分析Kubernetes CIS 安全基线分析分析被部署挖矿软件的容器镜像获取环境信息Hidden in layersRBAC最低权限配置错误使用 Sysdig Falco 进行运行时安全监控和检测 Metarget ke…...

【3D目标检测】Det3d—SE-SSD模型训练(前篇):KITTI数据集训练

SE-SSD模型训练 1 基于Det3d搭建SE-SSD环境2 自定义数据准备2.1 自定义数据集标注2.2 训练数据生成2.3 数据集分割 3 训练KITTI数据集3.1 数据准备3.2 配置修改3.3 模型训练 1 基于Det3d搭建SE-SSD环境 Det3D环境搭建参考&#xff1a;【3D目标检测】环境搭建&#xff08;OpenP…...

基于ASP.NET+ SQL Server实现(Web)医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...

让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

Pydantic + Function Calling的结合

1、Pydantic Pydantic 是一个 Python 库&#xff0c;用于数据验证和设置管理&#xff0c;通过 Python 类型注解强制执行数据类型。它广泛用于 API 开发&#xff08;如 FastAPI&#xff09;、配置管理和数据解析&#xff0c;核心功能包括&#xff1a; 数据验证&#xff1a;通过…...