React Native系统组件(二)

发布于:2025-09-02 ⋅ 阅读:(18) ⋅ 点赞:(0)

点击组件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,在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


网站公告

今日签到

点亮在社区的每一天
去签到