当前位置: 首页 > news >正文

【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.dtcms.com/a/282157.html

相关文章:

  • BNN 技术详解:当神经网络只剩下 +1 和 -1
  • 神经网络常见激活函数 13-Softplus函数
  • 重生之我在打御网杯打半决赛(高职组)
  • FCN语义分割笔记(1)
  • 大语言模型(LLM)训练的教师强制(Teacher Forcing)方法
  • 人工智能之数学基础:神经网络之多样本矩阵参数求导
  • Java线程创建与运行全解析
  • 什么是数据仓库?数据库与数据仓库有什么关系?
  • 消息转换器--通过此工具进行时间转换
  • 7.isaac sim4.2 教程-Core API-数据记录
  • 多态,内部类(匿名内部类),常用API(1)
  • LVS:高性能负载均衡利器
  • DAC0832的扩展方式有哪些?
  • [硬件电路-28]:从简单到复杂:宇宙、芯片与虚拟世界的共通逻辑
  • Uniswap V2/V3/V4简短说明
  • 定制安全组-openstack定制安全组禁止特定云主机访问其他云主机
  • ST算法和ST表
  • 在Next.js里玩转pdf预览
  • django在线音乐数据采集-22647
  • Django+Celery 进阶:Celery可视化监控与排错
  • JobSet:Kubernetes 分布式任务编排的统一解决方案
  • flink sql读hive catalog数据,将string类型的时间戳数据排序后写入kafka,如何保障写入kafka的数据是有序的
  • 从零开始的云计算生活——番外4,使用 Keepalived 实现 MySQL 高可用
  • Django 接口自动化测试平台实现(一)
  • 蓝光三维扫描技术:汽车轮毂轴承模具检测的高效解决方案
  • 【tower】Rust tower库原理详解以及axum限流实战
  • 在新闻资讯 APP 底部切换不同类型界面,部分界面可以通过 ViewPager 实现滑动切换
  • 枫清科技参编的《人工智能知识工程指南(1.0)》发布
  • 压力测试Apache Bench(ab)
  • 从缓存 CAS 看Kimi K2使用的MuonClip优化器