@futurejj/反应-本土-可见-传感器
QQ 组件能见度传感器包, 以感知一个组件是否处于可配置的插入阈值和%能见度回调的视图中 .
使用大小写
- 懒惰装入: 只有在可见时才装入图像/内容,以优化种子、画廊、图表或网页视图中的性能.
- 滚动动画:用于进入取景口的组件的触发动画(如:已淡出,已滑出).
- 分析跟踪: 在设定持续时间或百分比内可见的广告/广告的日志印象.
- 动态 UI 优化:暂停/重播视频,根据组件能见度在种子或旋转木马中清理出屏幕组件或定时器.
安装
使用线条
yarn add @futurejj/react-native-visibility-sensor
使用 npm :
npm install @futurejj/react-native-visibility-sensor
使用量
import React, { useState } from 'react';
import { ScrollView, Text } from 'react-native';
import { VisibilitySensor } from '@futurejj/react-native-visibility-sensor';
export default function VisibilitySensorExample() {
const [isVisible, setIsVisible] = useState(false);
const [percentVisible, setPercentVisible] = useState<number>(0);
return (
<ScrollView>
<VisibilitySensor
onChange={setIsVisible}
onPercentChange={setPercentVisible} // optional callback for % change
threshold={{ top: 100, bottom: 100 }}
style={[styles.item, { backgroundColor: isVisible ? 'green' : 'red' }]}>
{/* Visibility state */}
<Text>This View is currently visible? {isVisible ? 'yes' : 'no'}</Text>
{/* Percent visibility state */}
<Text>{`Percent visible: ${percentVisible}%`}</Text>
</VisibilitySensor>
</ScrollView>
);
}
属性
VisibilitySensorProps 扩展 ViewProps 包含所有视图的共同属性,例如 style, (中文(简体) ), onLayout等 (中文(简体) ).
| 财产 | 类型 | 需求 | 说明 |
|---|---|---|---|
onChange | (visible: boolean) => void | 对 | 调用函数, 当可见度改变时会点火 . |
onPercentChange | (percentVisible: number) => void | 没有 | 调用函数, 当可见度% 变化时点火 . |
disabled | boolean | 没有 | 若为 true,关闭传感器. |
triggerOnce | boolean | 没有 | 若为 true传感器只会触发一次. |
delay | number 或者说 undefined | 没有 | 传感器触发前以毫秒计的延迟. |
threshold | 可见感应阈值 | 没有 | 定义传感器触发时必须可见的视图部分. |
此外,所有属性来自 ViewProps 也适用.
可见感应阈值
| 财产 | 类型 | 需求 | 说明 |
|---|---|---|---|
top | number | 没有 | 可见度最高阈值. |
bottom | number | 没有 | 可见度的下限值 . |
left | number | 没有 | 可见度的左阈值 . |
right | number | 没有 | 可见度的正确阈值 . |
页:1
- 面对Android的问题? 参考这次讨论: https://github.com/JairajJangle/ react-native-visibility-senor/pull/1#issuecomment-2251569005 (英语)
捐款
见 贡献指南 学习如何为储存库和发展工作流程作出贡献.
许可证
麻省理工学院
支持项目
谢谢
- 模块使用 创建- 反应- 本土- 图书馆
- 叉从( D) : 反应-内生-组件-视图 打开 @se09deluca/反应-本土-组件-inview
- Pokemon 图像来源 : 波克蒙DB
- Readme 编辑时使用 泰波拉语Name