在 React Native 和 Expo 中使用 WebView 中本地文件中的 CSS

Question

我使用的是最新的 Expo SDK。我使用一个非独立的项目。我需要从 WebView 中的本地文件加载 css，从这样的字符串加载 html：

<WebView source={{ baseUrl: './', html: this.fullPost }} />

其中 this.fullPost 看起来像这样

this.fullPost = `
  <html>
    <head>
      <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>some html that uses style.css</body>
  </html>`;

那么我应该把 style.css 文件放在哪里，我应该指定什么作为 baseUrl？这个应该怎么搭配Expo？

谢谢。

Answer 1

最简单的方法是将您的 css 代码包装到 javascript 文件中：

style.js:

const css = `
<style>
// copy your css file's content here
</style>
`;
export default css;

然后 import style from './style';，你可以简单地将 style 连接到 this.fullPost。

在 React Native 和 Expo 中使用 WebView 中本地文件中的 CSS

Use CSS from local file in WebView with React Native and Expo

android

exponent

ios

react-native

expo