1

我有一个带有图像的本机 Web 应用程序。我想做平移和缩放，所以我尝试用 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={{

这应该工作吗？

4

1 回答 1

1

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

在这种情况下，您应该将特定的库显式添加到include选项babel或webpack配置中。请参阅react-native-web文档以获取示例：

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未填充的功能，或者包含本机扩展。成功加载这些文件后，您可能会深入了解。

于 2018-03-24T07:54:46.323 回答