React Native 中的图像轮播或图库

Question

我正在尝试使用 webpack 编译现有的 React Native 项目以使其在 Web 平台上可用。有一个名为react-native-snap-carousel的包在Web平台上不能很好地工作。

我使用了 if 语句让它在 Web 上使用另一个包（react-image-gallery），这样做之后，它现在在 Web 上运行良好，但是当我尝试在 ios 或 android 上打开它时，会提示错误，消息类似于“无法从“FlashGalleryWeb.js”解析“react-image-gallery/styles/css/image-gallery.css”。由于css文件是react-image-gallery包的一部分，删除会让事情在浏览器中看起来很奇怪，我需要找到另一种方法来解决它。

我尝试通过创建一个新文件在运行时注入 css 样式，然后有条件地调用它。 首先，将css文件复制并粘贴到screens文件夹中，以便于查找。 然后新建一个文件WebCSSLoader.js，里面的代码是

export function loadWebCSS() {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = '../path/to/image-gallery.css';
  document.head.appendChild(link);
}

然后在我的 FlashGalleryWeb.js 文件中，添加以下代码：

import { loadWebCSS } from './WebCSSLoader';

function MyComponent() {
  if (Platform.OS === 'web') {
    loadWebCSS();
  }

  // Rest of my code
}

现在，我可以在ios和android平台上打开它，但CSS样式不会在Web上应用。控制台中的错误消息是：拒绝应用来自'http://localhost:8080/screens/image-gallery.css'的样式，因为它的MIME类型（'text/html'）不是受支持的样式表MIME类型，并且严格MIME 检查已启用。

此外，这是 webpack.config.js 的一部分：

      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },

有什么办法可以解决这些问题吗？我对任何方法都持开放态度，包括使用其他包或对我的代码进行任何更改。

提前致谢！

Answer 1

我不知道这是否与此有关，但是您是否考虑过使用三元运算符，或者您是否在下面为其他情况设置了 else 块？