React Native PagerView Webpack TypeError on web

Question

我正在使用"react native pager view"中的PagerView组件https://github.com/callstack/react-native-pager-view.

简短的背景故事我的应用程序打算在所有三个平台(Android，iOS，web(上都可用。我知道这个库不支持web，我试图通过在web上不使用这个组件来妥协，如果不在web上，我会有条件地使用这个组件。

我试图创建一个总是为false的if条件块来测试它，它似乎仍然试图在编译时读取组件。

import PagerView from 'react-native-pager-view';
const render = () => {
let view = <View></View>;
if (false) { // Ideally (Platform.OS !== "web")
// Code works if I comment out the code line below
view = <PagerView ...></PagerView>;
}
return <View>{view}</View>;
}

如果我尝试运行上面的代码，下面是网络上的错误消息。

类型错误：对象(react_anative_web_dist_index__WEBPACK_IMPORTED_MODULE_0__["requireActivateComponent"](不是函数。(在'对象(react_anative_web_dist_index__WEBPACK_IMPORTED_MODULE_0__["requireActivateComponent"]((VIEW_MANAGER_NAME('，'对象(react_anative_web_dist_index__WEBPACK_IMPORTED_MODULE_0__[quot；requireActivateComponent"]('是Object的实例(

我认为这可以通过某种Webpack配置来解决，但不幸的是，我对此并不太了解。

这些也是我在Expo Metro Bundler页面上收到的一些额外错误消息

node_modules/areact本机寻呼机视图/lib/module/PagerView.js已尝试导入错误："react native web/dist/index"不包含默认值export(以"ReactNative"导入(。

node_modules/rect本机寻呼机视图/lib/module/PagerViewNative.js尝试导入错误：未从导出"requireActivitComponent"react native web/dist/index"。

如有任何帮助或建议，我们将不胜感激，谢谢！

Answer 1

这就是我(从文档(处理它的方式。

当需要在NodeJS/Web和React native之间共享模块时，您也可以使用.nature.js扩展，但它与Android/iOS没有区别。这对于在React Native和React JS之间共享公共代码的项目尤其有用。

例如，假设您的项目中有以下文件：

Container.js # picked up by Webpack, Rollup or any other Web bundler
Container.native.js # picked up by the React Native bundler for both Android and iOS (Metro)

您仍然可以在没有.nature扩展的情况下导入它，如下所示：

import Container from './Container';