【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",},
});
跳转到详情页,也会有一样的顶部和底部信息: