Installations

npm install @tuya-oh/react-native-easy-view-transformer

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

20.18.3

NPM Version

10.8.2 Releases

Unable to fetch releases

Download Statistics

Total Downloads

0

Last Day

0

Last Week

0

Last Month

0

Last Year

0

Maintainers

3

Package Meta Information

Latest Version

1.2.1-rc-0.0.3

Package Id

@tuya-oh/react-native-easy-view-transformer@1.2.1-rc-0.0.3

Unpacked Size

38.84 kB

Size

9.87 kB

File Count

7

NPM Version

10.8.2

Node Version

20.18.3

Published on

Apr 08, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

0%

NaN

Compared to previous day

Last Week

0%

NaN

Compared to previous week

Last Month

0%

NaN

Compared to previous month

Last Year

0%

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

3

prop-types react-native-easy-guesture-responder react-native-scrolling

Peer Dependencies

2

react react-native

Dev Dependencies

15

react react-native @babel/core @babel/runtime babel-jest jest metro-react-native-babel-preset react-test-renderer babel-eslint eslint eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-native

模板版本：v0.2.2

`react-native-easy-view-transformer`

[!TIP] Github 地址

安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：@tuya-oh/react-native-easy-view-transformer Releases，并下载适用版本的 tgz 包。

进入到工程目录并输入以下命令：

[TIP]# 处替换为 tgz 包的路径

npm

1npm install @tuya-oh/react-native-easy-view-transformer@file:#

yarn

1yarn add @tuya-oh/react-native-easy-view-transformer@file:#

下面的代码展示了这个库的基本使用场景：

[!WARNING] 使用时 import 的库名不变。

1import React, { useState } from "react";
2import { View, Button, ScrollView, StyleSheet } from "react-native";
3import ViewTransformer from "react-native-easy-view-transformer";
4import MasonryList from "react-native-masonry-list";
5
6export function EnableTransform() {
7  const [enableTransform, setEnableTransform] = useState(true);
8
9  return (
10    <ScrollView style={{ height: '100%', marginBottom: 20 }} >
11          <View style={[styles.container, styles.position]}>
12            <View style={{ position: 'absolute', zIndex: 100, left: 20, top: 10, width: '100%' }}>
13              <Button
14                title={enableTransform ? "禁用手势交互" : "启用手势交互"}
15                onPress={() => setEnableTransform(!enableTransform)}
16              /></View>
17            <ViewTransformer
18              style={{ marginTop: 30 }}
19              enableTransform={enableTransform}
20              maxScale={4}
21            >
22              <MasonryList
23                images={[
24                  { uri: "https://luehangs.site/pic-chat-app-images/pexels-photo-853168.jpeg" },
25                  {
26                    uri: "https://luehangs.site/pic-chat-app-images/animals-avian-beach-760984.jpg",
27                    dimensions: { width: 1080, height: 1920 }
28                  },
29                  { url: "https://luehangs.site/pic-chat-app-images/beautiful-beautiful-woman-beauty-9763.jpg" },
30                  { uri: "https://luehangs.site/pic-chat-app-images/photo-755745.jpeg" },
31                  { uri: "https://luehangs.site/pic-chat-app-images/photo-799443.jpeg" }
32                ]}
33              />
34            </ViewTransformer>
35          </View>
36    </ScrollView>
37  );
38};
39
40const styles = StyleSheet.create({
41  container: {
42    flex: 1,
43    padding: 20,
44  },
45  position: {
46    position: 'relative'
47  },
48  transformer: {
49    flex: 1,
50    backgroundColor: "#f0f0f0",
51    marginTop: 20,
52  },
53  image: {
54    width: "100%",
55    height: "100%",
56  },
57});

约束与限制

兼容性

在以下版本验证通过

RNOH：0.72.28; SDK：5.0.2.126 ; IDE：DevEco Studio 5.0.7.210; ROM：5.0.0.123;

属性

Name	Description	Type	Required	Platform	HarmonyOS Support
enableTransform	用于控制是否启用视图的手势变换功能。当设为 false 时，所有手势交互（如双指缩放、单指拖动、双击缩放）均被禁用	Boolean	否(no)	All	是(yes)
enableScale	用于控制是否启用视图的缩放（Scale）变换功能	Boolean	否(no)	All	是(yes)
enableTranslate	用于控制是否启用视图的平移（Translation）变换功能	Boolean	否(no)	All	是(yes)
maxOverScrollDistance	控制视图拖出边界的最大距离（像素）的属性，需配合 enableResistance={true} 使用	Number	否(no)	All	是(yes)
maxScale	用于限制视图缩放比例上限的一个属性	Number	是(yes)	All	是(yes)
contentAspectRatio	用于指定内容视图的宽高比确保内容在缩放时保持原始比例	Number	否(no)	All	是(yes)
enableResistance	用于控制视图拖拽时的边界阻力效果。当用户拖拽内容超出视图边界时，该属性会通过阻力系数限制拖拽距离，产生类似“弹性”的物理效果，避免内容被完全拖出可视区域	Boolean	否(no)	All	是(yes)
resistantStrHorizontal	控制视图水平拖动到边缘时的弹性阻力系数的数值属性。它影响用户水平拖动视图超出边界时的“阻力强度”	Number\|String\|Function	否(no)	All	是(yes)
resistantStrVertical	控制视图垂直拖动到边缘时的弹性阻力系数的数值属性。它影响用户垂直拖动视图超出边界时的“阻力强度”	Number\|String\|Function	否(no)	All	是(yes)
onTransformStart	一个回调函数属性，当视图开始进行变换操作时会触发该回调	Function	否(no)	All	是(yes)
onViewTransformed	视图变换（缩放、平移）完成后的回调，当用户结束手势操作（如松手）或程序化变换完成时触发，（包括初始状态设置）	Function	否(no)	All	是(yes)
onPinchTransforming	一个回调函数属性，它会在用户进行捏合手势（缩放操作）的过程中持续触发	Function	否(no)	All	是(yes)
onPinchStartReached	用于监听捏合手势开始的回调函数	Function	否(no)	All	是(yes)
onPinchEndReached	当缩放手势达到预设的最大或最小缩放比例时触发的回调。它在用户缩放视图到极限时触发，用于提示用户已无法继续缩放	Function	否(no)	All	是(yes)
onTransformGestureReleased	用于处理变换手势释放事件的回调函数	Function	否(no)	All	是(yes)
onSwipeUpReleased	用于处理向上滑动手势释放事件的回调函数	Function	否(no)	All	是(yes)
onSwipeDownReleased	用于处理向下滑动手势释放事件的回调函数	Function	否(no)	All	是(yes)
onDoubleTapStartReached	用于处理双击手势开始事件的回调函数，当前缩放比例从较大值切换到较小值触发	Function	否(no)	All	是(yes)
onDoubleTapEndReached	用于处理双击手势结束事件的回调函数，当前缩放比例从较小值切换到较大值触发	Function	否(no)	All	是(yes)
onDoubleTapConfirmed	用于处理确认双击手势事件的回调函数	Function	否(no)	All	是(yes)
onSingleTapConfirmed	用于处理确认单指点击手势事件的回调函数	Function	否(no)	All	是(yes)
onLayout	用于监听视图布局完成的回调函数，主要作用是获取组件的尺寸和位置信息，从而支持手势操作（如缩放、平移、旋转）的精准计算	Function	否(no)	All	是(yes)
children	定义需要进行手势变换（如缩放、平移、旋转）的子视图内容	Node	否(no)	All	是(yes)

遗留问题

无

其他

开源协议

本项目基于 The MIT License (MIT)，请自由地享受和参与开源。

No vulnerabilities found.

No security vulnerabilities found.