React Native系统组件(二)

点击组件TouchableOpacity

1,

activeOpacity是0-1的值,表示点击的时候不透明度的变化范围。

如果值是0.3,那么点击的时候透明度的变化范围就是0.3-1

2,

delayLongPress={1000}表示长按一秒中才会出发长按事件

3,

点击事件执行的顺序是:onPressIn->onPressOut->onPress

长按事件执行的顺序是:onPressIn->onLongPress->onPressOut

TouchableHighlight

1,

2,必须要有子组件

3,

4,

underlayColor:表示按钮按下去的颜色。

几乎不用的TouchableWithoutFeedback按钮


这里的styles.button2不生效。

Button

1,

这里的style也不生效。

Pressable 新版本提供,功能强大

1,

2,

按下去后背景是白色的,没有按下去的时候背景是蓝色的(#2030FF),这就是带样式的状态。

子节点也可以带状态

ScrollView

1,

固定子元素渲染

列表渲染,必须用key

View数组渲染,也必须有key

2,


3,

属性为none的时候,滚动ScrollView不会键盘消失

属性为on-drag的时候,滚动键盘消失

interactive只在iOS生效

4,

当为never的时候,点击输入框以外的地方,键盘消失,always键盘不消失,且输入框不失去焦点,handled与never类似,区别是当ScrollView有一个TextInput和Button两个子组件的时候,如果是never,点击Button,第一次点击会收起键盘,但Button不执行onpress()回调。只有当键盘收起后再次点击Button,才会执行onPress()。有键盘的时候button获取不到焦点。

当值为handled时候,键盘弹出的情况下点击按钮,按钮会执行onPress()同时键盘不收起。

5,

当我们按住scrollview滚动的时候,onMomentumScrollBegin回调是不执行的,松手的刹那,才会执行

6,

监听页面的滚动距离

NativeEvent就是桥接原生的。

如果要监听y轴的滚动距离

IOS需要增加scrollEventThrottles属性,

16表示每隔16毫秒回调一次onScroll。1-16效果是一样的,因为每16毫秒绘制一帧

7,

当为always时候,滚动到头的时候,会有轻微上移动,当为never的时候,滚动到头后继续滚动没有任何效果

8,

整页整页的滚动

可以实现轮播图效果

9,

false的时候无法滚动

10,

加载ScrollView的时候,y轴默认滚动100

11,

当为false的时候,不显示滚动条

12,

表示滚动的时候第0个元素吸顶。

13,



相关推荐
Java后端的Ai之路6 小时前
14、ReactJS - 路由(Router)
前端·react.js·状态模式
持敬chijing6 小时前
白盒测试与代码审计-js登录逆向实战
javascript·网络·安全·web安全·网络安全·网络攻击模型
优选资源分享7 小时前
PicGo v3.0.3 新版 | 开源免费图床工具
javascript·笔记·electron
ShineWinsu7 小时前
对于JavaScript:JavaScript基础语法的解析
开发语言·前端·javascript·面试·web·基础语法·循环
普通人68 小时前
php+html+canvas实现树状打开的结构
开发语言·javascript·html5·1024程序员节
猫头_9 小时前
AI 流式传输工程指南:模型吐出半截 JSON,前端如何边收边渲染?
前端·javascript·llm
鶴哥只手遮天10 小时前
React 19.3.1 源码深度剖析-第 12 章(下)RSC 与 Flight 协议
前端·react.js·开源
我的div丢了肿么办10 小时前
element-plus表格使用:filter-method过滤导致出现无数据
前端·javascript·vue.js
YIAN10 小时前
入门篇:LangGraph 入门实战:从零搭建最简单的 RAG 问答系统
javascript·langchain
YIAN11 小时前
高级篇:进阶多跳 RAG:子问题拆解 + 循环检索 + 智能规划,搞定复杂链式问题
javascript·langchain