Question

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

这应该有用吗？

Answer 1

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

在这种情况下，您应该将特定的lib显式添加到include或babel config的webpack选项。有关示例，请参阅react-native-web document：

path.resolve（appDirectory，＆＃39; node_modules / react-native-uncompiled＆＃39;）

在你的情况下react-native-image-pan-zoom代替react-native-uncompiled。

但是，无法保证react-native-image-pan-zoom可以在您的网络项目中使用，因为许多react-native库使用某些功能react-native-web没有填充，或包含原生扩展。成功加载这些文件后，您可以深入了解。

如何使用react-native-pan-zoom与本机网站进行反应

1 个答案: