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

React Native(一)

移动端触摸事件

example1:

<ButtononPress={() => {Alert.alert('你点击了按钮!');}}title="点我!"
/>

Touchable 系列组件

  1. TouchableHighlight 此组件的背景会在用户手指按下时变暗

  1. TouchableNativeFeedback 会在用户手指按下时形成类似墨水涟漪的视觉效果。

  1. TouchableOpacity 会在用户手指按下时降低按钮的透明度,而不会改变背景的颜色

  1. TouchableWithoutFeedback 处理点击事件的同时不显示任何视觉反馈

在列表中上下滑动、在视图上左右滑动以及双指缩放

example2:

import React from 'react';
import { Image, ScrollView, Text } from 'react-native';const logo = {uri: 'https://reactnative.dev/img/tiny_logo.png',width: 64,height: 64
};export default App = () => (<ScrollView><Text style={{ fontSize: 96 }}>Scroll me plz</Text><Image source={logo} /><Image source={logo} /><Image source={logo} /><Image source={logo} /><Image source={logo} /><Text style={{ fontSize: 96 }}>If you like</Text><Image source={logo} /><Image source={logo} /><Image source={logo} /><Image source={logo} /><Image source={logo} /><Text style={{ fontSize: 96 }}>Scrolling down</Text><Image source={logo} /><Image source={logo} /><Image source={logo} /><Image source={logo} /><Image source={logo} /><Text style={{ fontSize: 96 }}>What's the best</Text><Image source={logo} /><Image source={logo} /><Image source={logo} /><Image source={logo} /><Image source={logo} /><Text style={{ fontSize: 96 }}>Framework around?</Text><Image source={logo} /><Image source={logo} /><Image source={logo} /><Image source={logo} /><Image source={logo} /><Text style={{ fontSize: 80 }}>React Native</Text></ScrollView>
);

1、ScrollView是一个通用的可滚动的容器,你可以在其中放入多个组件和视图,而且这些组件并不需要是同类型的。ScrollView 不仅可以垂直滚动,还能水平滚动(通过horizontal属性来设置)。

API:

(1) pagingEnabled属性 ,允许使用滑动手势对视图进行分页,在 Android 上也可以利用ViewPager组件水平滑动视图。

(2) maximumZoomScaleminimumZoomScale两者的属性, 您的用户能够利用捏合以及扩大手势来放大或缩小

注:ScrollView适合用来显示数量不多的滚动元素。放置在ScrollView中的所有组件都会被渲染,哪怕有些组件因为内容太长被挤出了屏幕外。如果你需要显示较长的滚动列表,那么应该使用功能差不多但性能更好的FlatList组件。下面我们来看看如何使用长列表。

2、几个适用于展示长列表数据的组件,一般而言我们会选用FlatList或是SectionList。

(1)FlatList更适于长列表数据,且元素个数可以增删。和ScrollView不同的是,FlatList并不立即渲染所有元素,而是优先渲染屏幕上可见的元素。

必须的两个属性是datarenderItem。data是列表的数据源,而renderItem则从数据源中逐个解析数据,然后返回一个设定好格式的组件来渲染。

example3:

import React from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';const styles = StyleSheet.create({container: {flex: 1,paddingTop: 22},item: {padding: 10,fontSize: 18,height: 44,},
});const FlatListBasics = () => {return (<View style={styles.container}><FlatListdata={[{key: 'Devin'},{key: 'Dan'},{key: 'Dominic'},{key: 'Jackson'},{key: 'James'},{key: 'Joel'},{key: 'John'},{key: 'Jillian'},{key: 'Jimmy'},{key: 'Julie'},]}renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}/></View>);
}export default FlatListBasics;

(2)要渲染的是一组需要分组的数据,也许还带有分组标签的,那么SectionList将是个不错的选择

example4:

import React from 'react';
import { SectionList, StyleSheet, Text, View } from 'react-native';const styles = StyleSheet.create({container: {flex: 1,paddingTop: 22},sectionHeader: {paddingTop: 2,paddingLeft: 10,paddingRight: 10,paddingBottom: 2,fontSize: 14,fontWeight: 'bold',backgroundColor: 'rgba(247,247,247,1.0)',},item: {padding: 10,fontSize: 18,height: 44,},
})const SectionListBasics = () => {return (<View style={styles.container}><SectionListsections={[{title: 'D', data: ['Devin', 'Dan', 'Dominic']},{title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},]}renderItem={({item}) => <Text style={styles.item}>{item}</Text>}renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}keyExtractor={(item, index) => index}/></View>);
}export default SectionListBasics;

相关文章:

React Native(一)

移动端触摸事件example1:<ButtononPress{() > {Alert.alert(你点击了按钮&#xff01;);}}title"点我&#xff01;" />Touchable 系列组件TouchableHighlight 此组件的背景会在用户手指按下时变暗TouchableNativeFeedback 会在用户手指按下时形成类似墨水涟…...

Kotlin 26. Kotlin 如何播放音频文件

Kotlin 如何播放音频文件 文章目录Kotlin 如何播放音频文件1 下载并放置音频文件2 activity_main.xml3 MainActivity.kt1 下载并放置音频文件 我们可以随便下载一个音频文件&#xff0c;比如 alarm.mp3&#xff0c;需要将其放置在 /res/raw/ 路径下。 2 activity_main.xml 这…...

recv和明文收包分析

我们CTRLg 跳到recv 分析收包函数 发现函数会断并且收包函数返回值(收包包长)也会不断变化 那么证明recv是真正的收包函数&#xff0c;游戏没有重新实现该函数 我们只要分析该函数即可 在recv函数执行完毕以后下断 eax是包长,esi28是包指针 我们上2个号&#xff0c;让另外…...

【IVIF的超分重建】

Multimodal super-resolution reconstruction of infrared and visible images via deep learning &#xff08;基于深度学习的红外和可见光图像多模态超分辨率重建&#xff09; 提出了一种基于编解码器结构的红外-可见光图像融合方法。图像融合任务被重新表述为保持红外-可见…...

“深度学习”学习日记。--加深网络

2023.2.13 深度学习 是加深了层的深度神经网络的学习过程。基于之前介绍的网络&#xff0c;只需要通过 叠加层&#xff0c; 就可以创建深度网络 之前的学习&#xff0c;已经学习到了很多东西&#xff0c;比如构成神经网络的各种层、参数优化方法、误差反向传播法&#xff0c;…...

2023前端面试总结含参考答案

文章目录1. 父子组件生命周期的执行顺序:2. 原型链&#xff1a;3. promise的理解&#xff1a;4. 数组循环&#xff0c;foreach&#xff0c;filter&#xff0c;map&#xff0c;reduce5. 数组去重&#xff0c;set6. 组件通信方式7. 路由钩子8. 首页首屏加载优化&#xff1a;9. th…...

总览 Java 容器--集合框架的体系结构

前言 我们在讲 Java 的数据类型的时候&#xff0c;单独介绍过数组&#xff0c;数组也确实是开发程序中常用的内存类型之一&#xff0c;不过 Java 内置的数组限制颇多&#xff0c;所以此后扩展出了List这种结构&#xff0c;与之类似的Set、Queue 这些内存中的容器都被放在了 Co…...

即便考分很好也不予录取的研究生复试红线,都是原则性问题

在浙大研究生招生录取政策文件中有这么一句话&#xff1a;坚持“按需招生、全面衡量、择优录取、宁缺毋滥”的原则&#xff0c;以提高人才选拔质量为核心&#xff0c;在确保安全性、公平性和科学性的基础上&#xff0c;做到统筹兼顾、精准施策、严格管理。字字体现出研究生招生…...

Android java创建子线程的几种方法

1.新建一个类继承自Thread&#xff0c;并重写run()方法&#xff0c;并在里面编写耗时逻辑。 1 2 3 4 5 6 7 class ThreadTest extends Thread { Override public void run() { //具体的耗时逻辑代码 } } new ThreadTest().st…...

UVa 11212 Editing a Book 编辑书稿 IDA* Iterative Deepening A Star 迭代加深搜剪枝

题目链接&#xff1a;Editing a Book 题目描述&#xff1a; 给定nnn个(1<n<10)1<n<10)1<n<10)数字&#xff0c;数字分别是1,2,3,...,n1, 2, 3, ...,n1,2,3,...,n&#xff0c;但是顺序是打乱的&#xff0c;你可以选择一个索引区间的数字进行剪切操作。问最少进…...

第一章:unity性能优化之内存优化

目录 前言 unity性能优化之内存的优化 一、unity Analysis工具的使用。 二、内存优化方法 1、设置和压缩图片 2、图片格式 3、动画文件 4、模型 5、RenderTexture&#xff08;RT&#xff09; 6、分辨率 7、资源的重复利用 8、shader优化 9、对bundle进行良好的管…...

2023年家族办公室研究报告

第一章 概况 家族办公室最早起源于古罗马时期的大“Domus”&#xff08;家族主管&#xff09;以及中世纪时期的大“Domo”&#xff08;总管家&#xff09;。现代意义上的家族办公室出现于19世纪中叶&#xff0c;一些抓住产业革命机会的大亨将金融专家、法律专家和财务专家集合…...

Typescript快速入门

Typescript快速入门第一章 快速入门0、TypeScript简介1、TypeScript 开发环境搭建2、基本类型3、编译选项4、webpack5、Babel第二章&#xff1a;面向对象0、面向对象简介1、类&#xff08;class&#xff09;2、面向对象的特点3、接口&#xff08;Interface&#xff09;4、泛型&…...

如何激励你的内容团队产出更好的创意

对于一个品牌而言&#xff0c;如何创造吸引受众并对受众有价值内容是十分关键的。随着市场数字化的推进&#xff0c;优质的创意和内容输出对一个品牌在市场中有着深远的影响。对于很多内容策划和创作者来说&#xff0c;不断地产出高质量有创意的内容是一件非常有挑战性的事情。…...

机械设备管理软件如何选择?机械设备管理软件哪家好?

随着信息化技术的进步与智能制造的发展趋势&#xff0c;很多机械设备制造企业也在一直探寻适合自己的数字化管理转型之路&#xff0c;而企业上ERP管理软件又是实现数字化管理的前提&#xff0c;机械设备管理软件对于企业来说就是关键一环。机械设备管理软件如何选择&#xff1f…...

深入浅出带你学习shiro-550漏洞

//发点去年存货 前言 apache shiro是一个java安全框架&#xff0c;作用是提供身份验证&#xff0c;Apache Shiro框架提供了一个Rememberme的功能,存储在cookie里面的Key里面&#xff0c;攻击者可以使用Shiro的默认密钥构造恶意序列化对象进行编码来伪造用户的 Cookie&#xf…...

项目(今日指数之环境搭建)

一 项目架构1.1 今日指数技术选型【1】前端技术【2】后端技术栈【3】整体概览1.2 核心业务介绍【1】业务结构预览【2】业务结构预览1.定时任务调度服务XXL-JOB通过RestTemplate多线程动态拉去股票接口数据&#xff0c;刷入数据库&#xff1b; 2.国内指数服务 3.板块指数服务 4.…...

PCL 基于投影点密度的建筑物立面提取

目录 一、算法原理1、投影密度理论及方法2、参考文献二、代码实现三、结果展示一、算法原理 1、投影密度理论及方法 将3维坐标点直接垂直投影到水平面上或者将 Z Z Z 值取任意常数,统计和计算水平面任意位置处所含投影点的个数记为...

DDD 参考工程架构

1 背景 不同团队落地DDD所采取的应用架构风格可能不同&#xff0c;并没有统一的、标准的DDD工程架构。有些团队可能遵循经典的DDD四层架构&#xff0c;或改进的DDD四层架构&#xff0c;有些团队可能综合考虑分层架构、整洁架构、六边形架构等多种架构风格&#xff0c;有些在实…...

重建,是2023年的关键词

作者&#xff1a;俞敏洪 来源&#xff1a;老俞闲话&#xff08;ID&#xff1a;laoyuxianhua&#xff09; 01 重建&#xff0c;是2023年的关键词 1.重建&#xff0c;是2023年的关键词 2023年&#xff0c;以一种奇特的方式来临。 之所以说奇特&#xff0c;是因为我们谁都没有…...

动手写操作系统-00-环境搭建以及资料收集

文章目录 动手写操作系统内核目标编本教程适合什么样的人?一些简单的要求操作系统的功能环境搭建参考文档:动手写操作系统内核 一直以来想学习linux操作系统,读了很多关于操作系统的书籍,也想自己动手写个OS 目标编 编写一个操作系统内核;能正常的运行自己编写的OS本教程适合…...

【scipy.sparse包】Python稀疏矩阵详解

【scipy.sparse包】Python稀疏矩阵 文章目录【scipy.sparse包】Python稀疏矩阵1. 前言2. 导入包3. 稀疏矩阵总览4. 稀疏矩阵详细介绍4.1 coo_matrix4.2 dok_matrix4.3 lil_matrix4.4 dia_matrix4.5 csc_matrix & csr_matrix4.6 bsr_matrix5. 稀疏矩阵的存取5.1 用save_npz保…...

从写下第1个脚本到年薪30W,我的自动化测试心路历程

我希望我的故事能够激励现在的软件测试人&#xff0c;尤其是还坚持在做“点点点”的测试人。 你可能会有疑问&#xff1a;“我也能做到这一点的可能性有多大&#xff1f;”因此&#xff0c;我会尽量把自己做决定和思考的过程讲得更具体一些&#xff0c;并尽量体现更多细节。 …...

JAVA八股、JAVA面经

还有三天面一个JAVA软件开发岗&#xff0c;之前完全没学过JAVA&#xff0c;整理一些面经...... 大佬整理的&#xff1a;Java面试必备八股文_-半度的博客-CSDN博客 另JAVA学习资料&#xff1a;Java | CS-Notes Java 基础Java 容器Java 并发Java 虚拟机Java IO目录 int和Inte…...

GAN系列基础知识

原始值函数 原始GAN的值函数是 minGmaxDV(D,G)Ex∼pdata(x)[logD(x)]Ez∼pz(z)[log(1−D(G(z)))]min_Gmax_DV(D,G) E_{x \sim p_{data}(x)}[logD(x)]E_{z \sim p_{z}(z)} [log(1-D(G(z)))]minG​maxD​V(D,G)Ex∼pdata​(x)​[logD(x)]Ez∼pz​(z)​[log(1−D(G(z)))] 其中Ex…...

Linux/CenterOS 7.9配置汉化gitlab服务器

1.安装gitlab的依赖项 yum install -y curl openssh-server openssh-clients postfix cronie policycoreutils-python2.启动postfix&#xff0c;并设置为开机启动 systemctl start postfixsystemctl enable postfix3.防火墙和selinux的设置 setenforce 0systemctl stop fire…...

山洪灾害监测预警平台 山洪灾害监测预警系统解决方案 以人为本 科学防御

平升电子山洪灾害监测预警平台 山洪灾害监测预警系统解决方案&#xff0c;集信息采集、传输、分析和预警等功能于一体&#xff0c;实现预警信息及时、准确地上传下达&#xff0c;提升监测预警能力&#xff0c;使可能受灾区域能够及时采取措施&#xff0c;最大程度减少人员伤亡和…...

The Number Of ThreadPoolExecutor

序言整理下Java 线程池中线程数量如何设置的依据巨人肩膀:https://blog.csdn.net/weilaizhixing007/article/details/125955693https://blog.csdn.net/yuyan_jia/article/details/120298564#:~:text%E4%B8%80%E4%B8%AA%E7%BA%BF%E7%A8%8B%E6%B1%A0%E5%A4%84%E7%90%86%E8%AE%A1,…...

Linux(Linux各目录结构详解)

我们知道Linux系统是一个文件系统&#xff0c;它的文件系统就类似windows系统下的磁盘文件系统。 我们连接上一台linux系统的服务器。 输入命令 &#xff1a; ls / 我们可以看到 linux系统的根目录下有这些目录 bin boot data dev etc hbr home lib lib64 lostfoun…...

UART通讯简介

UART全称Universal AsynchronousReceiver/Transmitter&#xff0c;通用异步收发传输器。 一、工作原理 和其它串口一样&#xff0c;数据按照二进制从低位到高位一位一位的传输&#xff0c;能将要传输的数据在串行通信与并行通信之间加以转换&#xff0c;能够灵活地与外部设备进…...

昆明营销型网站建设/站长之家查询网

昨天发布程序到2008服务器的IIS&#xff0c;从Sql Server数据库取数没问题&#xff0c;但是从Oracle数据库取数&#xff0c;非常的慢&#xff0c;同样的程序在2003服务器上没问题&#xff0c;本机也没问题。一开始怀疑是这台机器有问题&#xff0c;后来又换了一台2008的服务器发…...

朝阳市网站制作/百度最新推广产品

腾讯saas流量迁移记录 1 isito中的ingress和gateway k8s中相关知识的回忆&#xff1a; 集群外部访问Service&#xff0c;可以将type设置为nodePort、ExternalName和externalIPs、LoadBalancer、Ingress LoadBalancer&#xff1a; 该类型的Service被提交后&#xff0c;Kubernete…...

在网站上做教学直播平台多少钱/应用商店关键词优化

Excel.Application app (Microsoft.Office.Interop.Excel.Application)System.Runtime.InteropServices.Marshal.GetActiveObject("Excel.Application");...

满亦工作室 网站建设/推广方案应该有哪些方面

个人是跑业务的上班族&#xff0c;平时加班累成狗就不说了&#xff0c;主要是跑外勤的时间比较多&#xff0c;在外面接电话真的是太不方便了。为此&#xff0c;曾经花大价钱买过AirPods pro&#xff0c;但是在非常嘈杂的环境中&#xff0c;通话降噪效果真的一般般。后来一次搞定…...

网站建设项目规划书案例/南宁网站seo排名优化

不知道&#xff0c;坑...

欧美男女做黄色网站/源码之家

在Oracle 10g中&#xff0c;Flash back家族分为以下成员&#xff1a;Flashback Database | Flashback Drop | Flashback Table | Flashback Query(Flashback Query,Flashback Version Query&#xff0c;Flashback Transaction Query)。 闪回删除表(dropped tabl…...