如何使用 react-native-pan-zoom 和 react-native web答案

【问题标题】：How to use react-native-pan-zoom with react native web如何使用 react-native-pan-zoom 和 react-native web
【发布时间】：2023-04-11 12:43:01
【问题描述】：

我有一个带有图像的反应原生网络应用程序。我想做平移和缩放，所以我尝试用 react-native-pan-zoom 模块中的 ImageZoom 包装它。

<ImageZoom
    cropWidth={Dimensions.get('window').width}
    cropHeight={Dimensions.get('window').height}
    imageWidth={200}
    imageHeight={200}
  >
    <Image source={`/EventMaps/${name}`} style={styles.image} resizeMode="center" />
</ImageZoom>

但是出现编译错误

./node_modules/react-native-image-pan-zoom/built/image-zoom/image-zoom.component.js
Module parse failed: Unexpected token (555:16)
You may need an appropriate loader to handle this file type.
|             ]
|         };
|         return (<react_native_1.View style={__assign({}, image_zoom_style_1.default.container, this.props.style, { width: this.props.cropWidth, height: this.props.cropHeight })} 
             {...this.imagePanResponder.panHandlers}>
|         <react_native_1.Animated.View style={animateConf}>
|           <react_native_1.View onLayout={this.handleLayout.bind(this)} style={{

这应该工作吗？？

【问题讨论】：

标签： react-native-web

【解决方案1】：

node_modules 中的第三方库通常被排除在 Web 项目中的转换之外，因为它们通常随附已编译的 dist 文件。但是许多 react-native 库都附带源 jsx 文件，因为它应该由 react-native 工具链加载和转换。

在这种情况下，您应该将特定的库显式添加到babel 或webpack 配置的include 选项中。示例见react-native-web document：

path.resolve(appDirectory, 'node_modules/react-native-uncompiled')

在你的情况下react-native-image-pan-zoom 而不是react-native-uncompiled。

但是，它不能保证 react-native-image-pan-zoom 可以在您的 Web 项目中使用，因为许多 react-native 库使用了一些功能 react-native-web 没有填充或包含本机扩展。成功加载这些文件后，您可以深入了解一下。

【讨论】：