React Native - 在 WebView 中导入 css/js答案

【问题标题】：React Native - Import css / js in WebViewReact Native - 在 WebView 中导入 css/js
【发布时间】：2017-10-10 20:08:08
【问题描述】：

我在头部有一个带有 CSS 和 JS 链接的 WebView。它们都是 CDN 链接，所以一切正常。

是否可以直接从 node_modules 文件夹中导入该 CSS / JS？

例如，如果我想将 bootstrap 的 CSS 导入到 webview 中

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

有效，但是 <link rel="stylesheet" href="./bootstrap.min.css">

不起作用（假设出于测试目的，我将文件与带有 webview 的组件放在同一个文件夹中）

如果您需要查看更多代码或问题不清楚，请告诉我。此外，此处仅以 bootstrap 为例。谢谢！

【问题讨论】：

标签： css react-native cdn node-modules

【解决方案1】：

你可以像普通的html一样导入：

var bootstrap = `<!DOCTYPE html>
                  <html>
                  <head>
                      <link href="bootstrap.min.css" rel="stylesheet" />
                      <style type="text/css">
                      img{
                          max-width: 100%;
                      }
                      </style>
                  </head>
                  <body>X</body></html>`;
bootstrap = bootstrap.replace('X', html);
return (
 <WebView
      source={{html: bootstrap}}
      style={{marginTop: 20}}
   />
);

其中 html 是您的内容，您必须复制样式或喜欢它并根据需要进行自定义。它对我很有效

【讨论】：

有没有解决方案可以避免卡住所有的 CSS 内联？我想要语法高亮和格式化...