【React Native】布局和 Stack 、Slot

布局和Stack

点击链接后,页面切换时最好是有动画效果。页面一般都有头部,里面有页面的标题之类的东西。

app目录里,新建一个_layout.js文件,这是项目的布局文件

这个名字是固定的,前面必须有一个_

布局的意思,就是所有页面都归它管,而且它是最先运行的文件,我们可以在里面做各种配置。

expo-router里,引用StackStack是用于管理应用中的页面堆栈的。然后 IOS 可以看到顶部出现了 header ,标题显示的是 index ,然后左右切换页面也会出现动画效果。

  • 在布局文件里加上Stack后,所有页面都会被Stack管理。
  • 进入新页面会从右侧推入(Push),返回时弹出(Pop)页面(动画效果也是如此,IOS默认,安装需要额外配置),形成后进先出的这种结构。

但是安卓端顶部的标题,显示到最左边,而不是中间。切换页面,感觉没有什么动画效果。

所以可以增加一些配置:

复制代码
import { Stack } from 'expo-router';

export default function Layout() {
  return (
    <Stack
      screenOptions={{
        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",
  },
});

跳转到详情页,也会有一样的顶部和底部信息:

相关推荐
万少5 分钟前
Trae AI 编辑器6大使用规则
前端·javascript·人工智能
Moonbit1 小时前
MoonBit Pearls Vol.13:初探 MoonBit 中的 JavaScript 交互
javascript·后端
我家媳妇儿萌哒哒2 小时前
Vue2 elementUI年份区间选择组件
前端·javascript·elementui
山塘小鱼儿2 小时前
JavaScript 性能优化实战大纲
javascript
asfdsfgas2 小时前
Angular CDK 响应式工具实操指南:自适应布局构建技巧
javascript·ecmascript·angular.js
东方石匠3 小时前
Javascript常见面试题
前端·javascript·面试
性野喜悲3 小时前
<script setup lang=“ts“>+uniapp实现轮播(swiper)效果
前端·javascript·vue.js·小程序·uni-app
敲敲了个代码4 小时前
[特殊字符] Web 字体裁剪优化实践:把 42MB 字体包瘦到 1.6MB
前端·javascript·学习·html·web
change_fate4 小时前
vue3 懒加载第三方组件
javascript·vue.js·ecmascript
扎瓦斯柯瑞迫4 小时前
Cursor 提示"Too Many Accounts"?一行命令重置机器码
前端·javascript·后端