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

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

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

相关文章

快速上手Spring Cloud五：Spring Cloud与持续集成/持续部署（CI/CD）

快速上手Spring Cloud五：Spring Cloud与持续集成/持续部署（CI/CD）

快速上手Spring Cloud 一&#xff1a;Spring Cloud 简介 快速上手Spring Cloud 二&#xff1a;核心组件解析 快速上手Spring Cloud 三&#xff1a;API网关深入探索与实战应用 快速上手Spring Cloud 四&#xff1a;微服务治理与安全 快速上手Spring Cloud 五&#xff1a;Spring …
阅读更多...
206基于matlab的无人机航迹规划(UAV track plannin）

206基于matlab的无人机航迹规划(UAV track plannin）

基于matlab的无人机航迹规划(UAV track plannin&#xff09;。输入输出参数包括 横滚、俯仰、航向角&#xff08;单位&#xff1a;度&#xff09;&#xff1b;横滚速率、俯仰速率、航向角速率&#xff08;单位&#xff1a;度/秒&#xff09;&#xff1b;飞机运动速度——X右翼、…
阅读更多...
C语言--编译和链接

C语言--编译和链接

1.翻译环境 计算机能够执行二进制指令&#xff0c;我们的电脑不会直接执行C语言代码&#xff0c;编译器把代码转换成二进制的指令&#xff1b; 我们在VS上面写下printf("hello world");这行代码的时候&#xff0c;经过翻译环境&#xff0c;生成可执行的exe文件&…
阅读更多...
「15」色源：添加指定色彩的纯色画面素材

「15」色源：添加指定色彩的纯色画面素材

「15」色源添加指定色彩的纯色画面素材 在OBS软件里&#xff0c;在来源里可以增加色源&#xff0c;添加一个色块到您的场景中&#xff0c;作为一个背景色或辅助色。 图中的显示器就是加了色源的 实操步骤 第1步 添加色源 在「来源」的左下角&#xff0c;点「」选择「色源」&a…
阅读更多...
OpenAI最近推出的Sora，在NVIDIA H100上生成1分钟视频大约需要12分钟的时间

OpenAI最近推出的Sora，在NVIDIA H100上生成1分钟视频大约需要12分钟的时间

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
誉天华为认证云计算课程如何

誉天华为认证云计算课程如何

HCIA-Cloud Computing 5.0 课程介绍&#xff1a;掌握华为企业级虚拟化、桌面云部署&#xff0c;具备企业一线部署实施及运维能力 掌握虚拟化技术、网络基础、存储基础等内容&#xff0c;拥有项目实施综合能力 满足企业虚拟化方案转型需求&#xff0c;应对企业日益多样的业务诉求…
阅读更多...
admin端

admin端

一、创建项目 1.1 技术栈 1.2 vite 项目初始化 npm init vitelatest vue3-element-admin --template vue-ts 1.3 src 路径别名配置 Vite 配置 配置 vite.config.ts // https://vitejs.dev/config/import { UserConfig, ConfigEnv, loadEnv, defineConfig } from vite im…
阅读更多...
入门指南｜营销中人工智能生成内容的主要类型 [新数据、示例和技巧]

入门指南｜营销中人工智能生成内容的主要类型 [新数据、示例和技巧]

由于人工智能技术的进步&#xff0c;内容生成不再是一项令人头疼的任务。随着人工智能越来越多地接管手动内容制作任务&#xff0c;营销人员明智的做法是了解现有的不同类型的人工智能生成内容&#xff0c;以及哪些内容从中受益最多。这些工具可以帮助我们制作对您的受众和品牌…
阅读更多...
使用Jenkins打包时执行失败，但手动执行没有问题如ERR_ELECTRON_BUILDER_CANNOT_EXECUTE

使用Jenkins打包时执行失败，但手动执行没有问题如ERR_ELECTRON_BUILDER_CANNOT_EXECUTE

具体错误信息如&#xff1a; Error output: Plugin not found, cannot call UAC::_ Error in macro _UAC_MakeLL_Cmp on macroline 2 Error in macro _UAC_IsInnerInstance on macroline 1 Error in macro _If on macroline 9 Error in macro FUNCTION_INSTALL_MODE_PAGE_FUNC…
阅读更多...
.helper勒索病毒的最新威胁：如何恢复您的数据？

.helper勒索病毒的最新威胁：如何恢复您的数据？

导言&#xff1a; 随着信息技术的不断进步&#xff0c;网络安全问题日益突出&#xff0c;其中勒索病毒成为了威胁网络安全的一大隐患。.helper勒索病毒作为近期频繁出现的一种恶意软件&#xff0c;其危害性和传播速度引起了广大用户的深切关注。本文将深入探讨.helper勒索病毒…
阅读更多...
书生浦语训练营2期-第一节课笔记

书生浦语训练营2期-第一节课笔记

笔记总结: 了解大模型的发展方向、本质、以及新一代数据清洗过滤技术、从模型到应用的典型流程、获取数据集的网站、不同微调方式的使用场景和训练数据是什么&#xff0c;以及预训练和微调在训练优势、通信/计算调度、显存管理上的区别。 收获&#xff1a; 理清了预训练和微调…
阅读更多...
DDos系列攻击原理与防御原理

DDos系列攻击原理与防御原理

七层防御体系 静态过滤 命中黑名单 对确定是攻击的流量直接加入黑名单&#xff08;源地址命中黑名单直接丢弃&#xff0c;缺乏机动性和扩展性&#xff09; 畸形报文过滤 畸形报文攻击 TCP包含多个标记位&#xff0c;排列组合有规律 • 现象&#xff1a;TCP标记位全为1 …
阅读更多...
PhpStorm 2023 for Mac/Win：开启PHP集成开发新纪元，让编程更高效更智能

PhpStorm 2023 for Mac/Win：开启PHP集成开发新纪元，让编程更高效更智能

在数字时代的浪潮中&#xff0c;PHP作为一种广泛应用的服务器端脚本语言&#xff0c;其重要性不言而喻。而要在PHP的世界里游刃有余&#xff0c;一款强大的集成开发环境&#xff08;IDE&#xff09;是必不可少的。PhpStorm 2023&#xff0c;正是这样一款能够助您一臂之力的编程…
阅读更多...
【论文阅读】FlipCAM：高分辨率遥感影像弱监督建筑物提取的特征级翻转增强方法

【论文阅读】FlipCAM：高分辨率遥感影像弱监督建筑物提取的特征级翻转增强方法

【论文阅读】FlipCAM&#xff1a;高分辨率遥感影像弱监督建筑物提取的特征级翻转增强方法 文章目录 【论文阅读】FlipCAM&#xff1a;高分辨率遥感影像弱监督建筑物提取的特征级翻转增强方法一、介绍二、方法2.1 准备2.2 一致性的架构2.3 SAM模块2.4 建筑提取模式 三、实验结果…
阅读更多...
高效 CUDA 调试：将 NVIDIA Compute Sanitizer 与 NVIDIA 工具扩展结合使用并创建自定义工具

高效 CUDA 调试：将 NVIDIA Compute Sanitizer 与 NVIDIA 工具扩展结合使用并创建自定义工具

高效 CUDA 调试&#xff1a;将 NVIDIA Compute Sanitizer 与 NVIDIA 工具扩展结合使用并创建自定义工具 NVIDIA Compute Sanitizer 是一款功能强大的工具&#xff0c;可以节省您的时间和精力&#xff0c;同时提高 CUDA 应用程序的可靠性和性能。 在 CUDA 环境中调试代码既具有挑…
阅读更多...
JimuReport积木报表 v1.7.4 公测版本发布，免费的JAVA报表工具

JimuReport积木报表 v1.7.4 公测版本发布，免费的JAVA报表工具

项目介绍 一款免费的数据可视化报表&#xff0c;含报表和大屏设计&#xff0c;像搭建积木一样在线设计报表&#xff01;功能涵盖&#xff0c;数据报表、打印设计、图表报表、大屏设计等&#xff01; Web 版报表设计器&#xff0c;类似于excel操作风格&#xff0c;通过拖拽完成报…
阅读更多...
Android 性能优化实例分享-内存优化 兼顾效率与性能

Android 性能优化实例分享-内存优化 兼顾效率与性能

背景 项目上线一段时间后,回顾重要页面 保证更好用户体验及生产效率&#xff0c;做了内存优化和下载导出优化&#xff0c;具体效果如最后的一节的表格所示。 下面针对拍摄流程的两个页面 预览页 导出页优化实例进行介绍&#xff1a; 一.拍摄前预览页面优化 预览效果问题 存在…
阅读更多...
HelpLook AI ChatBot：自定义Prompts综合指南

HelpLook AI ChatBot：自定义Prompts综合指南

AI问答机器人&#xff08;AI Chatbot&#xff09;日益在各行业普及&#xff0c;但回答准确率的不足仍是其面临的痛点。用户在与AI问答机器人的互动中常发现&#xff0c;机器人难以完全理解和准确回答复杂问题。HelpLook可以通过自定义提示词&#xff08;Prompts&#xff09;和集…
阅读更多...
基于Spring Boot 3 + Spring Security6 + JWT + Redis实现登录、token身份认证

基于Spring Boot 3 + Spring Security6 + JWT + Redis实现登录、token身份认证

基于Spring Boot3实现Spring Security6 JWT Redis实现登录、token身份认证。 用户从数据库中获取。使用RESTFul风格的APi进行登录。使用JWT生成token。使用Redis进行登录过期判断。所有的工具类和数据结构在源码中都有。 系列文章指路&#x1f449; 系列文章-基于Vue3创建前端…
阅读更多...
深度学习理解及学习推荐（持续更新）

深度学习理解及学习推荐（持续更新）

主推YouTuBe和Bilibili 深度学习博主推荐&#xff1a; Umar Jamil - YouTubehttps://www.youtube.com/umarjamilai StatQuest with Josh Starmer - YouTubehttps://www.youtube.com/statquest RNN Illustrated Guide to Recurrent Neural Networks: Understanding the Int…
阅读更多...
最新文章

Copyright @ 2022~2023