RN 使用react-navigation写可以滚动的横向导航条(expo项目)

 

装包:

yarn add @react-navigation/material-top-tabs react-native-tab-view

 

npx expo install react-native-pager-view

 

 

import React from 'react'
import { View, Text, ScrollView, SafeAreaView } from 'react-native'
import { Icon } from '../../../../../component/light'
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'
import useList from './useList'
import styles from './styles'const HomeScreen = () => {return (<ScrollView style={styles.mMeTabsScrollView}><Text>666</Text></ScrollView>)
}const SettingsScreen = () => {return (<ScrollView style={styles.mMeTabsScrollView}><Text>666</Text></ScrollView>)
}const Tab = createMaterialTopTabNavigator()export default function Home(props) {const { index, userInfo, handleSetIndex, handleJumpPage, handleQuit } =useList(props)return (<View style={{ flex: 1 }}><Tab.NavigatorscreenOptions={{tabBarScrollEnabled: true,}}><Tab.Screen name="Home" component={HomeScreen} /><Tab.Screen name="Settings" component={SettingsScreen} /><Tab.Screen name="Home1" component={HomeScreen} /><Tab.Screen name="Settings1" component={SettingsScreen} /><Tab.Screen name="Home2" component={HomeScreen} /><Tab.Screen name="Settings2" component={SettingsScreen} /></Tab.Navigator></View>)
}

 

 

 

参考链接:

https://chat.xutongbao.top/

https://www.cnblogs.com/tengyuxin/p/13263143.html

https://reactnavigation.org/docs/material-top-tab-navigator/ 

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

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

相关文章

Linux文件属性与权限管理(可读、可写、可执行)

Linux把所有文件和设备都当作文件来管理&#xff0c;这些文件都在根目录下&#xff0c;同时Linux中的文件名区分大小写。 一、文件属性 使用ls -l命令查看文件详情&#xff1a; 1、每行代表一个文件&#xff0c;每行的第一个字符代表文件类型&#xff0c;linux文件类型包括&am…

【redis基础】

目录 一、概述 1.NoSQL 1.1 简述 1.2 类型 1.3 应用场景 1.3.1 缓存 1.3.2 分布式锁 1.3.3 计数器 1.3.4 会话管理 1.3.5 消息队列 2.Redis 2.1 简述 2.2 特性 2.3 监听端口号 2.4 数据类型 二、安装 1.编译安装 2.RPM安装 三、目录结构 1.查看 2.主配置文…

使用toad库进行机器学习评分卡全流程

1 加载数据 导入模块 import pandas as pd from sklearn.metrics import roc_auc_score,roc_curve,auc from sklearn.model_selection import train_test_split from sklearn.linear_model import LogisticRegression import numpy as np import math import xgboost as xgb …

心理咨询预约管理系统javaweb医院挂号jsp源代码mysql

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 心理咨询预约管理系统javaweb MVC模式&#xff0c;普…

活动发布会邀请媒体6步走

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 邀请媒体参加活动发布会对信息的传播&#xff0c;企业品牌建设有诸多的好处&#xff0c;今天就与大家分享下邀请媒体参加活动报道的6个步骤&#xff1a; 1. 策划与准备&#xff1a; -明…

构建Docker容器监控系统(Cadvisor +InfluxDB+Grafana)

目录 案例概述 Cadvisor InfluxDBGrafana 1.1、 Cadvisor 1.2、InfluxDB 1.3、Grafana 1.4、监控组件架构 1.5、开始部署 安装docker-ce 阿里云镜像加速器 创建自定义网络 创建influxdb容器 案例概述 Docker作为目前十分出色的容器管理技术&#xff0c;得到大量企业…

基于Java+SpringBoot+Vue的企业客户信息反馈平台设计与实现(源码+LW+部署文档等)

博主介绍&#xff1a; 大家好&#xff0c;我是一名在Java圈混迹十余年的程序员&#xff0c;精通Java编程语言&#xff0c;同时也熟练掌握微信小程序、Python和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架…

STM32 4G学习(二)

特性参数 ATK-IDM750C是正点原子开发的一款高性能4G Cat1 DTU产品&#xff0c;支持移动4G、联通4G和电信4G手机卡。 它以高速率、低延迟和无线数传作为核心功能&#xff0c;可快速解决应用场景下的无线数传方案。 它支持TCP/UDP/HTTP/MQTT/DNS/RNDIS/NTP协议&#xff0c;支持…

Clion开发Stm32之存储模块(W25Q64)驱动编写

前言 涵盖之前文章: Clion开发STM32之HAL库SPI封装(基础库) W25Q64驱动 头文件 #ifndef F1XX_TEMPLATE_MODULE_W25Q64_H #define F1XX_TEMPLATE_MODULE_W25Q64_H#include "sys_core.h" /* Private typedef ---------------------------------------------------…

STM32入门——定时器

内容为江科大STM32标准库学习记录 TIM简介 TIM&#xff08;Timer&#xff09;定时器定时器可以对输入的时钟进行计数&#xff0c;并在计数值达到设定值时触发中断16位计数器、预分频器、自动重装寄存器的时基单元&#xff0c;在72MHz计数时钟下可以实现最大59.65s的定时&…

广州VR制作 | 利用VR元宇宙平台开展林地管理培训的优势

在林业领域&#xff0c;实地调查是获取准确数据和深入了解森林生态的重要手段。然而&#xff0c;传统的实地调查方法存在诸多问题&#xff0c;如时间成本高、人力物力投入大、安全风险高等。为了解决这些教学痛点&#xff0c;我们引入了虚拟现实(VR)技术&#xff0c;通过虚拟林…

【JVM】 垃圾回收篇——自问自答(1)

Q什么是垃圾&#xff1a; 运行程序中&#xff0c;没用任何指针指向的对象。 Q为什么需要垃圾回收&#xff1f; 内存只分配&#xff0c;不整理回收&#xff0c;迟早会被消耗完。 内存碎片的整理&#xff0c;为新对象腾出空间 没有GC程序无法正常进行。 Q 哪些区域有GC&#…

react学习

1.react安装 2.react的使用 3.方法说明 4.初始化react脚手架 5.在脚手架中使用react 6.JSX 7.JSX需要注意的点 8.在JSX中使用JS 需要注意的点 9.条件渲染 10.列表渲染 11.样式处理 12.react组件 两种创建方式: 函数创建: 类组件: 13.事件 事件绑定 事件对象 14.有状态组件和…

2023年华数杯数学建模B题思路代码分析 - 不透明制品最优配色方案设计

# 1 赛题 B 题 不透明制品最优配色方案设计 日常生活中五彩缤纷的不透明有色制品是由着色剂染色而成。因此&#xff0c;不透明 制品的配色对其外观美观度和市场竞争力起着重要作用。然而&#xff0c;传统的人工配色 存在一定的局限性&#xff0c;如主观性强、效率低下等。因此…

CentOS7 启动谷歌浏览器 java+Selenium+chrome+chromedriver

前言&#xff1a;自己想使用该技术实现自动化抓取音乐&#xff0c;目前在window上运行成功&#xff0c;需要在Linux Centos服务上跑&#xff0c;配置上出现了许多问题&#xff0c;特此记录。 参考文档&#xff1a;CentOS7 安装Seleniumchromechromedriverjava_远方丿的博客-CSD…

使用gitee创建远程maven仓库

1. 创建一个项目作为远程仓库 2. 打包项目发布到远程仓库 id随意&#xff0c;url是打包到哪个文件夹里面 在需要打包的项目的pom中添加 <distributionManagement><repository><id>handsomehuang-maven</id><url>file:D:/workspace/java/2023/re…

Prometheus-各种exporter

文章目录 一、 nginx-prometheus-exporter1 nginx 配置1.1 Nginx 模块支持1.2 Nginx 配置文件配置2 部署 nginx-prometheus-exporter2.1 二进制方式部署2.1.1 解压部署2.1.2 配置 systemd2.1.3 添加 prometheus 的配置2.1.4 Dashborad2.2 docker-compose 方式部署3 可配置的指标…

回归预测 | MATLAB实现POA-CNN-BiGRU鹈鹕算法优化卷积双向门控循环单元多输入单输出回归预测

回归预测 | MATLAB实现POA-CNN-BiGRU鹈鹕算法优化卷积双向门控循环单元多输入单输出回归预测 目录 回归预测 | MATLAB实现POA-CNN-BiGRU鹈鹕算法优化卷积双向门控循环单元多输入单输出回归预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 MATLAB实现POA-CNN-BiGRU鹈鹕…

.Net C# 免费PDF合成软件

最近用到pdf合成&#xff0c;发现各种软件均收费啊&#xff0c;这个技术非常简单&#xff0c;别人写好的库一大把&#xff0c;这里用到了PDFsharp&#xff0c;项目地址Home of PDFsharp and MigraDoc Foundation 软件下载地址 https://download.csdn.net/download/g313105910…

【redis】能ping通虚拟机但是端口无法访问

问题 虚拟机上有redis&#xff0c;能ping通虚拟机的ip&#xff0c;但是idea连不上虚拟机里的redis&#xff0c;telnet已启动的redis6379端口失败 基本情况 虚拟机网络模式是NAT模式&#xff0c;linux防火墙firewalld已关闭&#xff0c;没有iptables&#xff0c;主机和虚拟机…