# ty-react-native-easy-view-transformer

**Repository Path**: rn-mi/ty-react-native-easy-view-transformer

## Basic Information

- **Project Name**: ty-react-native-easy-view-transformer
- **Description**: ty项目react-native-easy-view-transformer仓库
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-27
- **Last Updated**: 2025-08-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

> 模板版本：v0.2.2

<p align="center">
  <h1 align="center"> <code>react-native-easy-view-transformer</code> </h1>
</p>
<p align="center">
        <a href="https://github.com/Luehang/react-native-easy-view-transformer">
        <img src="https://img.shields.io/badge/platforms-android%20|%20ios%20|%20windows%20|%20harmony%20-lightgrey.svg" alt="Supported platforms" />
    </a>
    <a href="https://github.com/Luehang/react-native-easy-view-transformer/blob/master/LICENSE">
        <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License" />
    </a>
</p>






> [!TIP] [Github 地址](https://github.com/LenuoCompany/react-native-deprecated-custom-components/blob/master)

## 安装与使用

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

<!-- tabs:start -->

#### **npm**

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

#### **yarn**

```bash
yarn add @tuya-oh/react-native-easy-view-transformer
```

<!-- tabs:end -->

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

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

```tsx
import React, { useState } from "react";
import { View, Button, ScrollView, StyleSheet } from "react-native";
import ViewTransformer from "react-native-easy-view-transformer";
import MasonryList from "react-native-masonry-list";

export function EnableTransform() {
  const [enableTransform, setEnableTransform] = useState(true);

  return (
    <ScrollView style={{ height: '100%', marginBottom: 20 }} >
          <View style={[styles.container, styles.position]}>
            <View style={{ position: 'absolute', zIndex: 100, left: 20, top: 10, width: '100%' }}>
              <Button
                title={enableTransform ? "禁用手势交互" : "启用手势交互"}
                onPress={() => setEnableTransform(!enableTransform)}
              /></View>
            <ViewTransformer
              style={{ marginTop: 30 }}
              enableTransform={enableTransform}
              maxScale={4}
            >
              <MasonryList
                images={[
                  { uri: "https://luehangs.site/pic-chat-app-images/pexels-photo-853168.jpeg" },
                  {
                    uri: "https://luehangs.site/pic-chat-app-images/animals-avian-beach-760984.jpg",
                    dimensions: { width: 1080, height: 1920 }
                  },
                  { url: "https://luehangs.site/pic-chat-app-images/beautiful-beautiful-woman-beauty-9763.jpg" },
                  { uri: "https://luehangs.site/pic-chat-app-images/photo-755745.jpeg" },
                  { uri: "https://luehangs.site/pic-chat-app-images/photo-799443.jpeg" }
                ]}
              />
            </ViewTransformer>
          </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  position: {
    position: 'relative'
  },
  transformer: {
    flex: 1,
    backgroundColor: "#f0f0f0",
    marginTop: 20,
  },
  image: {
    width: "100%",
    height: "100%",
  },
});
```

## 约束与限制

### 兼容性

在以下版本验证通过

1. 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)](https://github.com/Luehang/react-native-easy-view-transformer/blob/master/LICENSE)，请自由地享受和参与开源。