react-native从入门到实战系列教程一ScrollView组件吸顶效果

news2024/9/21 2:34:50

在ScrollView组件里面把第一元素固定在视图顶部的效果,ScrollView在手机上自带了bounce回弹的效果,不管内容是不是超出组件高度还是宽度

实现效果

请添加图片描述

代码实现

import {
  View,
  Text,
  StyleSheet,
  Dimensions,
  TextInput,
  Button,
  Alert,
  ScrollView,
  StatusBar,
  SafeAreaView,
} from 'react-native';

function HomeScreen() {
  const handleStart = () => {
    // Alert.alert('Scroll started');
  };
  const handleEnd = () => {
    // Alert.alert('Scroll ended');
  };
  const handleTop = () => {
    Alert.alert('Scrolled to top');
  };
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView
        style={styles.scrollView}
        onMomentumScrollBegin={handleStart}
        onMomentumScrollEnd={handleEnd}
        stickyHeaderIndices={[0]}
        onScrollToTop={handleTop}>
        <View>
          <Text style={styles.title}>这是一个标题</Text>
        </View>
        <Text style={styles.text}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </Text>
      </ScrollView>
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: StatusBar.currentHeight - 40,
  },
  title: {
    fontSize: 22,
    backgroundColor: 'red',
    height: 40,
    color: '#fff',
    textAlign: 'center',
  },
  scrollView: {
    backgroundColor: 'pink',
    marginHorizontal: 10,
  },
  text: {
    fontSize: 42,
  },
});
export default HomeScreen;

注意

  • 本例子是要把文字固定在顶部,必须在Text组件外面再包一层View组件,否则Text里面的样式会失效。
  • showsVerticalScrollIndicator={false}隐藏滚动条,对应的还有水平方向的
  • view和safeview的差别
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1974504.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[windows10]win10永久禁用系统自动更新操作方法

WinR打开运行 输入regedit打开注册表 点击确定打开注册表 按照如下路径找到UX 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\WindowsUpdate\UX\Settings 在空白处点击鼠标右键&#xff0c;新建选择DWORD&#xff0c;然后重命名为FlightSettingsMaxPauseDays 双击FlightSet…

图论:1203. 项目管理(以小组为单位进行拓扑排序)

文章目录 1.问题分析2.思路整理3.官解思路 LeetCode&#xff1a;1203. 项目管理 建议直接看思路整理 1.问题分析 仔细读题可以发现&#xff0c;如果不考虑小组项目彼此相邻&#xff0c;则项目之间的依赖关系就是一个拓扑排序。 但是如果要考虑小组项目彼此相邻&#xff0c;问…

【机器人学】6-3.六自由度机器人运动学参数辨识- 机器人辨识参数耦合性分析

前言 上一章我们用两步优化方法求解了辨识参数&#xff0c; 【机器人学】6-2.六自由度机器人运动学参数辨识-优化方法求解辨识参数 我们给机器人的几何参数进行了数学建模&#xff0c;其中使用高斯牛顿法求解出了激光仪相对于机器人基座的坐标变换和机器人末端执行器相对于靶球…

【RTT-Studio】详细使用教程七:SGM5352外部DAC使用

文章目录 一、简介二、RTT时钟配置三、初始化配置四、完整代码五、测试验证 一、简介 本文主要介绍使用RTT-ThreadStudio来驱动SGM5352芯片的使用&#xff0c;该芯片主要是一个低功率&#xff0c;4通道&#xff0c;16位&#xff0c;电压输出DAC。它从2.7V到5.5V&#xff0c;设…

短视频矩阵系统设计:抖音短视频平台的最佳选择

随着移动互联网的快速发展&#xff0c;短视频行业异军突起&#xff0c;抖音短视频平台凭借其丰富的内容、便捷的创作工具和智能推荐算法&#xff0c;吸引了大量用户。在这个背景下&#xff0c;短视频矩阵系统应运而生&#xff0c;成为抖音短视频平台的最佳选择。本文将详细介绍…

左手坐标系、右手坐标系、坐标轴方向

一、右手坐标系 1、y轴朝上&#xff1a;webgl、Threejs、Unity、Unreal、Maya、3D Builder x&#xff1a;向右y&#xff1a;向上z&#xff1a;向前&#xff08;朝向观察者、指向屏幕外&#xff09; 2、z轴朝上&#xff1a;cesium、blender x&#xff1a;向右y&#xff1a;向前…

C# 方法的重载(Overload)

在C#中&#xff0c;方法的重载&#xff08;Overloading&#xff09;是指在一个类中可以有多个同名的方法&#xff0c;只要这些方法具有不同的方法签名&#xff08;即参数的数量、类型或顺序不同&#xff09;。这使得你可以使用相同的方法名称来执行相似但参数不同的操作&#x…

GEE必须会教程——基于Landsat影像构建NDVI时间序列

很久很久以前&#xff0c;小编写了一篇基于MODIS影像构建归一化植被指数的文章&#xff0c;不知道大家还有没有印象&#xff0c;有一段时间没有更新时间序列分析相关的文章了。 今天&#xff0c;我们来看看基于Lansat影像&#xff0c;我们来看看在GEE上如何构建NDVI的时间序列。…

AI跟踪报道第50期-新加坡内哥谈技术-本周AI新闻: 听听没有Scarlett Johansson的GPT-4o更加震撼

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

shellcode加密免杀

通过加密shellcode方式过安全软件拦截 先说结论&#xff0c;笔者没成功 shellcode&#xff1a; Shellcode 是一段用于在目标系统上执行特定操作的机器码。它通常被用于利用软件漏洞&#xff0c;以获取对目标系统的控制权或执行特定的恶意行为。 Shellcode 可以执行诸如创建进程…

MySQL 预处理、如何在 [Node.js] 中使用 MySQL?

前面文章我们已经总结了mysql下载安装配置启动以及如何用 Navicat 连接&#xff0c;还有MySQL的入门基础知识 、Node.js的基本知识、Express框架基于Node.js基础知识、下面我们总结如何在Node.js中使用MySQL数据库以及MySQL预处理基本知识。 目录 一、MySQL预处理 二、如何在…

JavaFX布局-GridPane

JavaFX布局-GridPane 常用实行alignmenthgapvgappaddinggridLinesVisible 实现方式Java实现fxml实现 使用行和列来组织其子节点将节点放置在二维网格中的任何单元格&#xff0c;同时也可以设置跨越行、跨越列 常用实行 alignment 对齐方式&#xff0c;设置内容居中&#xff0…

032-GeoGebra中级篇-列表与集合(list and set)及常用操作大全

列表在 GeoGebra 中扮演着重要角色&#xff0c;使用户能够处理和管理一组数值、点或对象。这些列表可以用于执行多种操作&#xff0c;如计算平均值、排序、查找最大或最小值、绘制点的集合等。通过使用列表&#xff0c;用户可以简化复杂的计算步骤&#xff0c;增强图形的动态性…

《计算机组成原理》(第3版)第1章 计算机系统概论 复习笔记

第1章 计算机系统概论 一、计算机系统简介 &#xff08;一&#xff09;计算机的软硬件概念 1&#xff0e;计算机系统由“硬件”和“软件”两大部分组成 &#xff08;1&#xff09;所谓“硬件”&#xff0c;是指计算机的实体部分&#xff0c;如主机、外部设备等。 &#xff0…

phpMyAdmin 漏洞

一、日志文件拿shell 在sql语句执行界面执行命令 将日志功能打开 再次查看 更改日志保存路径 擦看是否更改成功 植入一句话木马 访问木马 使用工具连接 二、导⼊导出拿WebShell 判断网站位置 判断在www在Extensions同级 写shell 访问shell,使用工具连接 三、可视化界面getshe…

C++11特性(二)

系列文章目录 C11特性(一) 文章目录 系列文章目录前言一、可变模板参数1.1 什么是可变参数模板1.2 如何打印可变模板参数的内容递归函数方式展开参数包逗号表达式展开参数包 1.3 emplace_back的实现1.4 可变模板参数为何高效 二、lambda表达式2.1 C98中的一个例子2.2 lambda表…

基于JAVA的商品供应管理系统-JavaEE

点击下载源码 基于JAVA的商品供应管理系统-JavaEE 摘 要 当今社会己进入信息社会时代&#xff0c;信息己经受到社会的广泛关注&#xff0c;被看作社会和科学技术发展的三大支柱&#xff08;材料、能源、信息&#xff09;之一。信息是管理的基础&#xff0c;是进行决策的基本依…

vue3使用svg(无废话版)

1.去阿里云矢量图标库&#xff0c;复制svg代码 2.新建一个phone.svg文件(存放在assets/icons/phone.svg)&#xff0c;内容是刚刚复制的svg代码 <svg t"1722592653925" class"icon" viewBox"0 0 1024 1024" version"1.1" xmlns&quo…

数据失踪?这四款U盘数据恢复利器教你如何避免错误操作与保障安全性

当U盘上的数据不见了&#xff0c;数据恢复软件就像是你的救命稻草。一些好的数据恢复软件还会提供安全的恢复选项&#xff0c;确保在恢复的过程中不会对原来的数据造成损害。接下来&#xff0c;我们就来看看这些顶级的U盘数据恢复软件是怎么帮我们恢复U盘数据的&#xff0c;同时…