React Native 手势句柄 PinchGestureHandler 文本组件答案

【问题标题】：React Native Gesture Handle PinchGestureHandler Text ComponentReact Native 手势句柄 PinchGestureHandler 文本组件
【发布时间】：2022-02-08 21:37:37
【问题描述】：

所以我试图在 React Native 中实现一个缩放来放大文本组件，我似乎无法理解文档，并且大多数其他帖子都是关于使图像可缩放的，我试图从这些中推断，但是不想工作。

我正在使用 react-native-gesture-handler 中的 PinchGestureHandler 组件

这是我到目前为止得到的，它没有做任何事情：

import { PinchGestureHandler } from 'react-native-gesture-handler';

const ArticlesScreen = () => {

...


  const scale = useRef(new Animated.Value(0)).current;

  const handlePinch = () => {
    Animated.event(
    [
      {
        nativeEvent: {
          scale,
        },
      },
    ],
    { useNativeDriver: true }
  )}

return (

<View>
   <PinchGestureHandler onGestureEvent={handlePinch}>
            <Animated.Text
              style={{
                backgroundColor: theme === 'light' ? '#FFF' : '#2D65A7',
                transform: [{ scale }],
              }}
            >
              <TouchableOpacity
                onPress={changeTheme}
                style={tw`pt-3 pl-60 flex-row items-center`}
              >
                <MaterialCommunityIcons
                  name="desk-lamp"
                  size={34}
                  color={theme === 'light' ? '#2D65A7' : '#FFF'}
                />
                <Text style={{ color: theme === 'light' ? '#2D65A7' : '#FFF' }}>
                  {theme === 'light' ? 'Dark Mode' : 'Light Mode'}
                </Text>
              </TouchableOpacity>
              <RenderHtml
                enableCSSInlineProcessing={true}
                contentWidth={Dimensions.get('window').width - 32}
                source={html}
                enableExperimentalMarginCollapsing={false}
                renderersProps={renderersProps}
                tagsStyles={
                  theme === 'light' ? tagsStylesLight : tagsStylesDark
                }
                classesStyles={
                  theme === 'light' ? classesStyles : classesStylesDark
                }
                customHTMLElementModels={customHTMLElementModels}
                ignoredDomTags={['colgroup']}
              />
            </Animated.Text>
          </PinchGestureHandler>
    </View>

 );
};

文件中有更多代码，我不想把它塞进太多以提高可读性，我想我知道了与此相关的内容。

提前谢谢你

【问题讨论】：

标签： reactjs react-native pinchzoom pinch react-native-gesture-handler

【解决方案1】：

因此，经过大量测试并试图弄清楚如何让手势处理程序工作并失败。我刚决定使用这个包，设置简单简单

https://www.npmjs.com/package/@dudigital/react-native-zoomable-view

【讨论】：