Rn使用FlatList导航栏自动回到中间

在这里插入图片描述

import { useState, useRef } from 'react'
import { FlatList, View, Text, StyleSheet, TouchableOpacity } from 'react-native'const Center = () => {const tabs = ["语文", "数学", "英语", "政治", "历史", "地理"]const [active, setActive] = useState(0)const flatRef = useRef()const activeTab = (index) => {setActive(index)flatRef.current.scrollToIndex({ viewPosition: 0.5, index: index, animated: true })}return (<><View style={styles.nav}><FlatList data={tabs} ref={flatRef} horizontal showsHorizontalScrollIndicator={false}renderItem={({ item, index }) => (<TouchableOpacity key={index} onPress={() => activeTab(index)}style={[styles.nav_item,active == index && styles.nav_item_active,tabs.length - 1 == index && styles.nav_item_last]}><Text style={active == index && styles.nav_item_active_text}>{item}</Text></TouchableOpacity>)}/></View></>)
}const styles = StyleSheet.create({nav: {height: 45,flexDirection: "row",alignItems: "center",borderBottomColor: "#eee",borderBottomWidth: 1,paddingHorizontal: 10},nav_item: {paddingHorizontal: 20,paddingVertical: 4,borderColor: "#DADCE2",borderWidth: 1,borderRadius: 20,alignItems: "center",justifyContent: "center",marginRight: 10},nav_item_last: {marginRight: 0},nav_item_active: {backgroundColor: "#2C72FF",borderColor: "transparent",},nav_item_active_text: {color: "#ffffff"}
})export default Center

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

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

相关文章

工学云打卡签到自动实现关于异地时定位的问题解决|蘑菇钉

工学云打卡助手&#xff0c;能解决你在异地时每天不间断签到的问题&#xff0c;仔细看图哦 1.自动签到 2.自定义打卡地区 3.生成日周月报与总结自动发表 4.支持随机通用内容 5.支持打卡结果推送 你是否曾经因为缺乏自律而无法坚持学习目标&#xff1f;是否曾经因为无法衡量…

分布式文件服务器——初识MinIO

开篇 MinIO ——开源优秀的分布式对象存储系统。 适用于AI的 高性能分布式云存储 MinIO 提供高性能、与S3 兼容的对象存储系统&#xff0c;让你自己能够构建自己的私有云储存服务。 MinIO原生支持 Kubernetes&#xff0c;它可用于每个独立的公共云、每个 Kubernetes 发行版、私…

C++: 继承

学习目标 1.继承的概念及定义 2.基类和派生类对象赋值转换(切片) 3.继承中的作用域(隐藏/重定义) 4.派生类的默认成员函数 5.继承与友元 6.继承与静态成员 7.菱形继承与菱形虚拟继承 8.总结 1.继承的概念及定义 1.1概念 继承: 它允许你创建一个新的类&#xff08;称为子类或派…

数据结构之堆的实现

首先我们要想堆应该用什么实现&#xff0c;我们这里可以使用数组&#xff0c;因为每一层的数是有限个的&#xff0c;所以我们可以很容易将数的每一个位置对应到数组中去。 那我们就可以仿照顺序表写出我们的结构。 然后我们要考虑我们要实现哪些函数。 最基本的功能初始化和销…

rabbitmq查看节点信息命令失败

不影响访问rabbitmq&#xff0c;但是无法使用 命令查看节点信息 等 查看节点信息命令&#xff1a;rabbitmq-diagnostics status --node rabbitJHComputer Error: unable to perform an operation on node ‘rabbitJHComputer‘. Please see diagnostics informatio rabbitmq-…

ssm+vue的台球厅管理系统(有报告)。Javaee项目,ssm vue前后端分离项目。

演示视频&#xff1a; ssmvue的台球厅管理系统(有报告)。Javaee项目&#xff0c;ssm vue前后端分离项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spring S…

服务器数据恢复-V7000存储2块磁盘故障脱机的数据恢复案例

服务器数据恢复环境&#xff1a; P740AIXSybaseV7000存储&#xff0c;存储阵列柜上共12块SAS机械硬盘&#xff08;其中一块为热备盘&#xff09;。 服务器故障&#xff1a; 存储阵列柜中有磁盘出现故障&#xff0c;工作人员发现后更换磁盘&#xff0c;新更换的磁盘数据同步到40…

C++练习题。。。

499 123 456 789 499是三位数 <499的素数有: 2 3 5 7 11 13 17 19 23 29 31 37 41 43 47 53 59 61 67 71 73 79 83 89 97 101 103 107 109 113 127 131 137 139 149 151 157 163 167 173 179 181 191 193 197 199 211 223 227 229 233 239 241 251 257 263 269 271 277 281 …

遥感云大数据在灾害、水体与湿地领域典型案 例实践及 GPT 模型应用

近年来遥感技术得到了突飞猛进的发展&#xff0c;航天、航空、临近空间等多遥感平台不断增加&#xff0c;数据的空间、时间、光谱分辨率不断提高&#xff0c;数据量猛增&#xff0c;遥感数据已经越来越具有大数据特征。遥感大数据的出现为相关研究提供了前所未有的机遇&#xf…

Vue3 + Ts实现NPM插件 - 定制loading

目录 你的 Loading&#x1f916; 安装&#x1f6f9; 简介苍白请 您移步文档&#xff1a;✈️ 使用方法&#x1f6e0;️ 配置 loading 类型&#x1f3b2; 定制 loading 色彩 &#x1f4a1; 注意事项 前期回顾 你的 Loading 开箱即可用的 loading&#xff0c; 说明&#xff1a;vu…

基于多线程的Reactor模式的 回声服务器 EchoServer

记录下 一个线程专门用来接受accept获取客户端的fd 获取fd之后 从剩余的执行线程中 找到一个连接客户端数量最少的线程 然后将客户端的fd加入到这个线程中并通过EPOLL监听这个fd 线程之间通过eventfd来通信 将客户端的fd传到 对应的线程中 参考了MediaServer 引入…

【Vue面试题十七】、你知道vue中key的原理吗?说说你对它的理解

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官&#xff1a;你知道vue中key的原理吗…

Android Studio 配置Git SVN忽略文件

在使用Android Studio进行版本控制时&#xff0c;经常会遇到需要忽略某些文件的情况&#xff0c;比如临时文件、编译生成的文件等。这些文件虽然在项目中存在&#xff0c;但不希望被加入到版本控制中。 在Android Studio中设置忽略文件 在Android Studio中&#xff0c;我们可…

关于网络协议的若干问题(二)

1、网络号、IP 地址、子网掩码和广播地址的先后关系是什么&#xff1f; 答&#xff1a;当在一个数据中心或者一个办公室规划一个网络的时候&#xff0c;首先是网络管理员规划网段&#xff0c;一般是根据将来要容纳的机器数量来规划&#xff0c;一旦定了&#xff0c;以后就不好…

Soul CEO张璐团队以用户安全为核心,探索社交平台安全治理新路径

“认同感”,是现代年轻人当下的核心社交需求之一,作为年轻人喜爱的新型开放式社交平台,Soul APP为年轻人们提供了一个自在表达、轻松互动的平台,为用户带来了志趣相投、精神共鸣的高质量网络连接。在Soul日活近千万的用户中,超过七成为Z世代年轻群体,如何能够为Z世代提供更安全…

sql 注入 文件读写 木马植入 远程控制

sql 注入 文件读写 木马植入 远程控制 一, 检测读写权限 查看mysql全局变量 SHOW GLOBAL VARIABLES LIKE %secure%secure_file_priv 空, 则任意读写secure_file_priv 路径, 则只能读写该路径下的文件secure_file_priv NULL, 则禁止读写二, 读取文件, 使用 load_file() 函数…

ArcGIS/GeoScene脚本:基于粒子群优化的支持向量机回归模型

参数输入 1.样本数据必须包含需要回归的字段 2.回归字段是数值类型 3.影响因子是栅格数据&#xff0c;可添加多个 4.随机种子可以确保每次运行的训练集和测试集一致 5.训练集占比为0-1之间的小数 6.迭代次数&#xff1a;迭代次数越高精度越高&#xff0c;但是运行时间越长…

NodeJs内置模块child_process

内置模块child_process子进程 写在前面 子进程是Nodejs的核心Api&#xff0c;如果你会shell命令&#xff0c;它会有非常大的帮助&#xff0c;或者你喜欢编写前端工程化工具之类&#xff0c;它也有很大的用处&#xff0c;以及处理CPU密集型应用。 创建子进程 Nodejs创建子进…

黑群晖video station评级问题

黑群晖video station评级问题 环境 群晖Version: 6.2.3-25423video station 2.4.10方法1,py文件 登录ssh,获取sudo权限 cd /var/packages/VideoStation/target/plugins/syno_themoviedbsudo vim search.py替换movie_data[vote_average] 替换为 round(movie_data[vote_avera…

【开题报告】如何借助chatgpt完成毕业论文开题报告

步骤 1&#xff1a;确定论文主题和研究问题 首先&#xff0c;你需要确定你的论文主题和研究问题。这可以是与软件开发、算法、人工智能等相关的任何主题。确保主题具有一定的研究性和可行性。 步骤 2&#xff1a;收集相关文献和资料 在开始撰写开题报告之前&#xff0c;收集相…