React-Native：在 WebView 中加载外部 CSS 文件

Question

我计划在我当前的 React-Native 项目中使用 WebView，它将渲染一个包含一些图片和外部 CSS 文件的 HTML 页面。我发现的其他解决方案使用了 React-Native 中定义的现有字符串。

我的第一部分工作得很好：

import { WebView } from 'react-native-webview';
import htmlPage from './myPage.html' // same dir for simplicity

我的组件：

  render(){
    return (
      <WebView
        source={htmlPage}
      />
    )
  };

我的 HTML 页面不包含任何指向其相应 CSS 文件的链接，而是在其他地方定义的（不是这里的问题）。我的方法是：

1. 在 WebView 中每个参数包含样式（不支持，仅适用于 JS）

2. 将 CSS 内容作为字符串读取并将其粘贴到 HTML 页面中，然后是 WebView（使用修改后的 HTML 页面）

第二种方法似乎很有希望，遗憾的是以下方法不起作用：

import cssPage from '../someCSS.css'

因为它的结果是：

Unable to resolve module `./someCSS.css` from `......./components/ComponentX/ComponentX.js`: The module `......./someCSS.css` could not be found from `......./components/ComponentX/ComponentX.js`. Indeed, none of these files exist:
  * `......./someCSS.css(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)`
  * `......./someCSS.css/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)`

RCTFatal
__28-[RCTCxxBridge handleError:]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
UIApplicationMain
main
start
0x0

此外，我研究了专注于将文件内容读取为字符串的库，例如

• React-Native-FS ,
• React-Native-本地资源

在这里我遇到了问题，我需要创建一个指向可读目录的链接（请参阅API），这对我来说似乎更令人困惑......

如果有人知道一个技巧来解决这个问题或提示我一个方法，我会非常高兴。

提前致谢！