React Native 手势处理 PinchGestureHandler 文本组件

Question

所以我试图在 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>

 );
};

文件中有更多代码，我不想为了更具可读性而塞满它，我想我得到了与此相关的内容。

提前谢谢您

Answer 1

因此，经过大量测试并尝试找出如何让手势处理程序工作并失败后。我刚刚决定使用这个软件包，设置简单又方便

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

Answer 2

看起来这取代了已贬值的react-native-zoomable-view， 经过两天的研究和试验发现： @openspacelabs/react-native-zoomable-view

它与我的 React Native 构建配合得很好，到目前为止使用的是 expo sdk 47.0.6