【React Native】布局和 Stack 、Slot

布局和Stack

點擊鏈接后,頁面切換時最好是有動畫效果。頁面一般都有頭部,里面有頁面的標題之類的東西。

app目錄里,新建一個_layout.js文件,這是項目的布局文件

這個名字是固定的,前面必須有一個_

布局的意思,就是所有頁面都歸它管,而且它是最先運行的文件,我們可以在里面做各種配置。

expo-router里,引用Stack 。Stack是用于管理應用中的頁面堆棧的。然后 IOS 可以看到頂部出現了 header ,標題顯示的是 index ,然后左右切換頁面也會出現動畫效果。

  • 在布局文件里加上Stack后,所有頁面都會被Stack管理。
  • 進入新頁面會從右側推入(Push),返回時彈出(Pop)頁面(動畫效果也是如此,IOS默認,安裝需要額外配置),形成后進先出的這種結構。

但是安卓端頂部的標題,顯示到最左邊,而不是中間。切換頁面,感覺沒有什么動畫效果。

所以可以增加一些配置:

import { Stack } from 'expo-router';export default function Layout() {return (<StackscreenOptions={{headerTitleAlign: 'center',     // 安卓標題欄居中animation: 'slide_from_right',  // 安卓使用左右切屏}}/>);
}

然后就可以看到動畫和居中的標題。

在這里插入圖片描述

Slot 插槽

Slot就是一個占位符,各個頁面,都會渲染在它里面。

import { Slot } from "expo-router";
import { SafeAreaView, StyleSheet, Text } from "react-native";export default function Layout() {return (<SafeAreaView style={styles.container}><Text style={styles.header}>App header</Text><Slot /><Text style={styles.footer}>? 版權所有</Text></SafeAreaView>);
}const styles = StyleSheet.create({container: {flex: 1,},header: {fontSize: 24,textAlign: "center",},footer: {fontSize: 18,textAlign: "center",},
});

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

跳轉到詳情頁,也會有一樣的頂部和底部信息:

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/pingmian/89318.shtml
繁體地址,請注明出處:http://hk.pswp.cn/pingmian/89318.shtml
英文地址,請注明出處:http://en.pswp.cn/pingmian/89318.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

3C電子產品藍光三維掃描檢測方案-中科米堆CASAIM

隨著3C電子產品向輕薄化、精密化方向發展&#xff0c;傳統的二維檢測技術已難以滿足現代制造業對產品精度的高標準要求。特別是在智能手機、平板電腦等消費電子領域&#xff0c;微小的結構偏差都可能導致產品組裝困難或性能下降。當前行業內普遍面臨檢測效率低、數據采集不完整…

Docker 鏡像原理

Union FS(聯合文件系統) Union File System 是一種分層、輕量級并且高性能的文件系統&#xff0c;它支持對文件系統的修改作為一次提交來一層層的疊加&#xff0c;同時可以將不同目錄掛載到同一個虛擬文件系統下。UnionFS 是一種為 Linux&#xff0c;FreeBSD 和 NetBSD 操作系統…

為什么IoTDB成為物聯網場景的技術優選?

在物聯網、工業監控等領域&#xff0c;時序數據的高效管理成為技術架構設計的關鍵環節。時序數據庫作為專門處理帶時間戳數據的系統&#xff0c;其選型需兼顧性能、兼容性與場景適配性。本文將從技術角度解析 IoTDB 的設計理念與實踐方法&#xff0c;為時序數據庫選型提供參考。…

js中的微任務和宏任務的理解

在JavaScript中&#xff0c;微任務&#xff08;Microtask&#xff09;和宏任務&#xff08;Macrotask&#xff09;是異步任務執行機制的重要組成部分&#xff0c;它們共同構成了JavaScript事件循環&#xff08;Event Loop&#xff09;的核心邏輯。理解這兩個概念對于編寫高性能…

Spring-AI系列-AI模型-Model

原文-知識庫&#xff0c;歡迎大家評論互動 AI Model API Portable ModelAPI across AI providers for Chat, Text to Image, Audio Transcription, Text to Speech, and Embedding models. Both synchronous and stream API options are supported. Dropping down to access mo…

MySQL查詢今天、昨天、上周、近30天、去年等的數據的方法

目錄 常用的MySQL查詢今天、昨天、上周、近30天、去年等數據的方法 0、Sql server中DateDiff()用法 1、MySQL的DATE_SUB()函數 定義和用法 語法 實例 2、MySQL的TO_DAYS(date) 3、MySQL的DATE() 函數 定義和用法 4、MySQL NOW() 函數 定義和用法 語法 實例 例子 …

Linux —— B / 基礎開發工具

一、軟件包管理器1.1什么是軟件包1.2 Linux軟件生態1.3 yum具體操作1.3.1 查看軟件包1.3.2 安裝軟件1.3.3 卸載軟件1.3.4 注意事項1.4 安裝源二、編輯器Vim2-1 Linux編輯器-vim使用2-2 vim的基本概念2-3 vim的基本操作2-4 vim正常模式命令集2-5 vim末行模式命令集2-6 vim操作總…

SQL,在join中,on和where的區別

0.結論 兩個表在&#xff0c;join時&#xff0c;首先做一個笛卡爾積&#xff0c;on后面的條件是對這個笛卡爾積做一個過濾形成一張臨時表&#xff0c;如果沒有where就直接返回結果&#xff0c;如果有where就對上一步的臨時表再進行過濾。 先on&#xff0c;再join&#xff0c;再…

SD-WAN在儲能網絡中的應用,傳統方案如何借力智能化升級?(附網絡架構圖)

一、儲能網絡的建設挑戰在儲能項目中&#xff0c;網絡系統通常需要實現以下目標&#xff1a;高可靠性&#xff1a;實時采集和傳輸儲能設備狀態數據&#xff0c;鏈路中斷可能導致系統故障。靈活擴展&#xff1a;分布式站點部署廣泛&#xff0c;傳統網絡擴展需重新鋪設線路&#…

Oracle11.2.0.4 RAC遷移升級Oracle19.3 RAC

問題描述 填寫問題的基礎信息。 系統名稱 Oracle11.2.0.4遷移升級Oracle19.3 IP地址 操作系統 Centos7.5 數據庫 Oracle11.2.0.4遷移升級Oracle19.3 癥狀表現 問題的癥狀表現如下 需要將單機的Oracle11.2.0.4環境升級到Oracle19.3.0RAC環境&#xff0c;采用遷移升級的…

SAP-ABAP:SAP的‘cl_http_utility=>escape_url‘對URL進行安全編碼方法詳解

SAP的’cl_http_utility>escape_url’對URL進行安全編碼方法詳解 核心作用&#xff1a;對 URL 進行安全編碼&#xff0c;將特殊字符轉換為 %XX 格式&#xff0c;確保符合 HTTP 傳輸規范。1. 功能與作用 ? URL 安全編碼 將非安全字符轉換為十六進制 ASCII 碼&#xff08;%XX…

基于HarmonyOS的智能燈光控制系統設計:從定時觸發到動作聯動全流程實戰

摘要 隨著智能家居的快速普及&#xff0c;人們對居住環境的智能化需求越來越高&#xff0c;其中智能燈光控制是最基礎、也是最常用的功能之一。從最初的遠程控制發展到如今能“感知環境、自動響應”的智能燈光系統&#xff0c;背后依賴的是強大的系統聯動能力。鴻蒙系統作為面向…

ROS1/Linux——linux虛擬機主ip地址:網絡信息不可用

ROS1/Linux——linux虛擬機主ip地址&#xff1a;網絡信息不可用 文章目錄ROS1/Linux——linux虛擬機主ip地址&#xff1a;網絡信息不可用參考億點鏈接問題描述最終解決方案參考億點鏈接 Unable to fetch some archives, maybe run apt-get update or try with –fix-missingli…

ssl相關命令生成證書

當前環境 OpenSSL 3.5.1 1 Jul 2025 (Library: OpenSSL 3.5.1 1 Jul 2025) GmSSL 3.1.2 Dev 本地gmssl命令 #生成證書公私鑰對 gmssl sm2keygen -pass 1234 -out sm2.key -pubout sm2pub.pem #使用certgen命令生成自簽名證書cert.crt gmssl certgen -C CN -ST Beijing -L Ha…

TensorFlow深度學習實戰——DCGAN詳解與實現

TensorFlow深度學習實戰——DCGAN詳解與實現0. 前言1. DCGAN 架構2. 構建 DCGAN 生成手寫數字圖像2.1 生成器與判別器架構2.2 構建 DCGAN相關鏈接0. 前言 深度卷積生成對抗網絡 (Deep Convolutional Generative Adversarial Network, DCGAN) 是一種基于生成對抗網絡 (Generati…

SpringBoot 使用MyBatisPlus

引入依賴<dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-openapi3-jakarta-spring-boot-starter</artifactId><version>4.3.0</version> </dependency>寫一個interface 繼承basemapMapper public in…

Git 中如何查看提交歷史?常用命令有哪些?

回答重點在 Git 中&#xff0c;我們可以使用 git log 命令來查看提交歷史。這個命令會列出所有的提交記錄&#xff0c;顯示每個提交的哈希值、作者信息、提交時間和提交信息。常用的 git log 命令及其選項有&#xff1a;1&#xff09; git log &#xff1a;顯示完整的提交歷史。…

Flink數據流高效寫入MySQL實戰

這段代碼展示了如何使用 Apache Flink 將數據流寫入 MySQL 數據庫&#xff0c;并使用了 JdbcSink 來實現自定義的 Sink 邏輯。以下是對代碼的詳細解析和說明&#xff1a;代碼結構包聲明&#xff1a;package sink定義了代碼所在的包。導入依賴&#xff1a;導入了必要的 Flink 和…

MATLAB下載安裝教程(附安裝包)2025最新版(MATLAB R2024b)

文章目錄前言一、MATLAB R2024b下載二、MATLAB下載安裝教程前言 MATLAB R2024b 的推出&#xff0c;進一步提升了其在工程實踐中的實用性和專業性。它不僅提供了更多針對特定工程領域的解決方案&#xff0c;還在性能和兼容性方面進行了顯著改進。 本教程將一步一步引導完成 MA…

Linux 基礎命令學習,立即上手Linux操作

Linux?基礎命令學習本文挑選最常用、最容易上手的 Linux 命令。每條都附帶一句話說明 真實示例&#xff0c;直接復制即可練習&#xff0c;零基礎也能跟得上。1? 先掌握 目錄導航&#xff1a;pwd?/?ls?/?cdpwd – 顯示當前所在目錄 pwd # 輸出示例 /home/yournamels??a…