布局和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",},
});
跳轉到詳情頁,也會有一樣的頂部和底部信息: