React Native Gesture Handle 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

因此，經過大量測試並試圖弄清楚如何讓手勢處理程序工作並失敗。 我剛剛決定使用這個 package，設置簡單易行

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