模板版本：v0.2.2

[!TIP] Github 地址

安装与使用

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

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

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

npm

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

yarn

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

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

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

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)，请自由地享受和参与开源。