【iOS开发】(六)react Native 路由嵌套传参与框架原理(完)20240423

【iOS开发】(六)react Native 路由嵌套传参与框架原理(完)20240423
感谢拉钩教育的教学。

(五)我们介绍了四种路由导航,这一节我们介绍他们的嵌套传参和框架的整体原理。到这里,大家已经能用RN框架进行一些小项目的开发了。

目录标题

      • 一 路由嵌套
      • 二 路由传参
      • 三 架构原理

一 路由嵌套

import {Text, StyleSheet, View, Button} from 'react-native';
import React, {Component} from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';const Tab = createBottomTabNavigator();function FeedScreen(props) {// 跳转方法prop.navigation.navigate参数是路由名称也就是Stack.Screen namereturn (<View style={[styles.container]}><Text style={[styles.text]}>HomeScreen</Text><Buttontitle={'跳到Profile页面'}onPress={() => props.navigation.navigate('Profile')}/><Buttontitle={'跳到Settings页面'}onPress={() => props.navigation.navigate('Settings')}/></View>);
}function MessagesScreen(props) {return (<View style={[styles.container]}><Text style={[styles.text]}>NewsScreen</Text></View>);
}function ProfileScreen(props) {return (<View style={[styles.container]}><Text style={[styles.text]}>ProfileScreen</Text></View>);
}function SettingsScreen(props) {return (<View style={[styles.container]}><Text style={[styles.text]}>SettingsScreen</Text></View>);
}function Home() {return (<Tab.Navigator><Tab.Screen name="Feed" component={FeedScreen} /><Tab.Screen name="Messages" component={MessagesScreen} /></Tab.Navigator>);
}const Stack = createStackNavigator();export default class Index extends Component {render() {return (<NavigationContainer><Stack.Navigator><Stack.Screenname="Home"component={Home}options={{headerShown: false}}/><Stack.Screen name="Profile" component={ProfileScreen} /><Stack.Screen name="Settings" component={SettingsScreen} /></Stack.Navigator></NavigationContainer>);}
}const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',},text: {fontSize: 40,},
});

在这里插入图片描述

二 路由传参

import {Text, View, Button} from 'react-native';
import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import {NavigationContainer} from '@react-navigation/native'; // 导入 NavigationContainerfunction HomeScreen({navigation}) {return (<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}><Text>首页</Text><Buttontitle="前往详情"onPress={() => {navigation.navigate('Details', {itemId: 86,otherParam: '这里可以是任何你想要的内容',});}}/></View>);
}function DetailsScreen({route, navigation}) {const {itemId, otherParam} = route.params;return (<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}><Text>详情页</Text><Text>itemId: {JSON.stringify(itemId)}</Text><Text>otherParam: {JSON.stringify(otherParam)}</Text><Buttontitle="再次前往详情"onPress={() =>navigation.push('Details', {itemId: Math.floor(Math.random() * 100),})}/><Button title="返回首页" onPress={() => navigation.navigate('Home')} /><Button title="返回" onPress={() => navigation.goBack()} /></View>);
}const Stack = createStackNavigator();export default function Index() {return (<NavigationContainer> <Stack.Navigator><Stack.Screen name="Home" component={HomeScreen} /><Stack.Screen name="Details" component={DetailsScreen} /></Stack.Navigator></NavigationContainer>);
}

在这里插入图片描述

三 架构原理

从启动过程,来理解架构设计
在这里插入图片描述

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

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

相关文章

电商价格监测的价值是什么

品牌做电商价格监测的原因多是为了渠道管控&#xff0c;即控价&#xff0c;管控价格前需要对渠道中的价格数据进行监测&#xff0c;通过监测价格&#xff0c;对渠道中低价数据进行全面的了解&#xff0c;如有授权低价率&#xff0c;非授权低价率&#xff0c;非授权低价店铺的总…

python与上位机开发day02

1.常见运算符 1.1 赋值运算符 赋值运算符主要用来对变量进行赋值,包括如下这些: 运算符描述赋值加等于-减等于*乘等于/除等于//整除等于%模等于**幂等于 实例如下: a 10 a 5 # 等价于 a a5 a *2 # 等价于 a a*21.2 比较运算符 比较运算符主要用来比较两个数据的大小…

Windows 搭建自己的大模型-通义千问

1、安装 pytorch https://pytorch.org/get-started/locally/ 点击进入官网&#xff0c;如图选择自己的环境得到pip安装依赖的命令&#xff1a; pip3 install --pre torch torchvision torchaudio --index-url https://download.pytorch.org/whl/nightly/cpu 2、拉取代码并安…

QA测试开发工程师面试题满分问答20: 软件的安全性应从哪几个方面去测试?

软件的安全性测试应从多个方面进行&#xff0c;并确保覆盖以下关键方面&#xff1a; 当回答问题时&#xff0c;可以根据自己的经验和知识&#xff0c;从上述要点中选择适合的方面进行详细说明。强调测试的综合性、全面性和持续性&#xff0c;并强调测试的重要性以及如何与开发团…

AIGC-stable-diffusion(文本生成图片)+PaddleHub/HuggingFace

功能 stable-diffusion(文本生成图片)PaddleHub&#xff0c;HuggingFace两种调用方式 PaddleHub 环境 pip install paddlepaddle-gpu pip install paddlehub 代码 from PIL import Image import paddlehub as hub module hub.Module(namestable_diffusion)## 保存在demo…

spring高级篇(二)

1、Aware和InitializingBean Aware和InitializingBean都与Bean的生命周期管理相关。 Aware接口: 概念: Aware接口是Spring框架中的一个标记接口&#xff0c;它表示一个类能够感知到&#xff08;aware of&#xff09;Spring容器的存在及其特定的环境。Spring框架提供了多个Awar…

jackson.dataformat.xml 反序列化 对象中包含泛型

重点&#xff1a; JacksonXmlProperty localName 指定本地名称 JacksonXmlRootElement localName 指定root的根路径的名称&#xff0c;默认值为类名 JsonIgnoreProperties(ignoreUnknown true) 这个注解写在类上&#xff0c;用来忽略在xml中有的属性但是在类中没有的情况 Jack…

索引的最左匹配原则

索引的最左匹配原则 我们先创建一张测试表&#xff0c;表的两个字段用来创建联合索引 CREATE TABLE test(id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,col1 INT,col2 INT,col3 INT );CREATE INDEX idx_c1c2 ON test(col1, col2);现在我们就可以分析查询sql脚本了 1.使用联合索…

CentOS 7.9.2007 中Docker使用GPU

一、安装nvidia驱动 1.1&#xff0c;查看显卡驱动 # 查看显卡型号 lspci | grep -i nvidia 1.2&#xff0c;进入 PCI devices &#xff0c;输入上一步查询到的 2204 1.3&#xff0c;进入 官方驱动 | NVIDIA&#xff0c;查询 Geforce RTX 3090 驱动并下载 1.4&#xff0c;禁用…

《XR806开发板试用》硬件IIC驱动MPU6050

1.环境配置 总结一下遇到的问题&#xff1a; 1.需要修改配置文件中的文件路径 2.固件编译出现以下问题时&#xff0c;需要修改文件内容 2.工程目录结构 device/xradio/xr806/ohosdemo/car_demo └── src #源文件 └── main.c #主函数 └── mpu6050.c #驱动代码 └…

国产PLC有哪些,哪个牌子比较好用?

你知道国产PLC有哪些吗,哪个牌子更好用吗&#xff1f; 今天拿出国产先锋的汇川与台达对比&#xff0c;注&#xff1a;视频后方有各品牌学习资料免费送&#xff0c;需要的移步自取。话说回来&#xff0c;只要基于Codesys开发的都比较好用&#xff0c;只是使用底层芯片不同&…

MACOS降级

一、下载MACOS 点击下载 注意只能跳转到商店下载&#xff0c;直接搜不到的。 二、格式化U盘 名称尽量取简单点等会要用 三、创建可引导的 macOS 安装器&#xff08;U盘&#xff09; Sonoma sudo /Applications/Install\ macOS\ Sonoma.app/Contents/Resources/createins…

SpringBoot 集成redisson

上篇我们聊了&#xff1a;如何查看redisson-spring-boot-starter和SpringBoot 对应版本 redisson介绍 Redisson是Redis Java客户端和实时数据平台。它提供了使用Redis更方便、更简单的方法。Redisson对象提供了一种关注点分离&#xff0c;使您能够专注于数据建模和应用程序逻辑…

代码随想录算法训练营DAY36|C++贪心算法Part.5|435.无重叠区间、763.划分字母区间、56. 合并区间

文章目录 435.无重叠区间按右边界排序CPP代码 按左边界排序如何判断相邻区间是否重叠如何判断一下一个区间与当前相邻区间是否重叠总结CPP代码 763.划分字母区间思路伪代码实现CPP代码 56. 合并区间思路CPP代码 435.无重叠区间 力扣题目链接 文章链接&#xff1a;435.无重叠区间…

对象与JSON字符串互转

1、JSON字符串转化成JSON对象 JSONObject jsonobject JSON.parseObject(str); 或者 JSONObject jsonobject JSONObject.parseObject(str); 功能上是一样的&#xff0c;都是将JSON字符串&#xff08;str&#xff09;转换成JSON对象 jsonobject 。注意str一定得是以键值对存在…

AppleWatch是真的能够减少我iPhone的使用时长

我应该是比较专情的果粉了&#xff0c;我有一台MacBook Pro、iPad Pro、airpods pro 2和iPhone 15 Pro Max。但我还从来没有用过苹果手表。 然后&#xff0c;我就去买了AppleWatchSeries9蜂窝款&#xff0c;并试用了一周&#xff0c;我想知道它是否能帮助我减少使用iPhone的时间…

remote: HTTP Basic: Access deniedfatal: Authentication failed for

$ git push -u origin main remote: HTTP Basic: Access denied fatal: Authentication failed for https://gitcode.com/edenl/GD32E350_hid_keyboard.git/ 使用访问令牌做为密码登录即可。

Laravel 6 - 第十五章 验证器

​ 文章目录 Laravel 6 - 第一章 简介 Laravel 6 - 第二章 项目搭建 Laravel 6 - 第三章 文件夹结构 Laravel 6 - 第四章 生命周期 Laravel 6 - 第五章 控制反转和依赖注入 Laravel 6 - 第六章 服务容器 Laravel 6 - 第七章 服务提供者 Laravel 6 - 第八章 门面 Laravel 6 - …

100个实用电气知识

在当今社会&#xff0c;电力作为日常生活和工作中不可或缺的能源&#xff0c;扮演着越来越重要的角色。为了更好地利用电力资源&#xff0c;了解电气知识成为了越来越多人的需求。在电气领域&#xff0c;有很多实用的知识&#xff0c;这些知识对于从事电气工作的人来说是非常重…

Hexin-v cookies

因为是在cookie里面的&#xff0c;所以在植入之前必定有setCookie 函数的调用 我们直接搜索setCookie 关键位置断上 清除痕迹 但是多次调试之后我发现&#xff0c;明面上存在setcookie的都不是关键函数。 只能从断点xhr请求开始 , 一步步找到cookie刚设置的请求。 最终在ch…