在 React Native 中样式化 WebView 内联 HTML答案

【问题标题】：Style WebView Inline HTML in React Native在 React Native 中样式化 WebView 内联 HTML
【发布时间】：2020-10-19 20:25:08
【问题描述】：

我需要在我的应用程序中渲染一些 HTML 文本，我只是尝试使用 react-native-webview，它按预期工作，但我仍然需要添加一些特定的样式，比如 lineHeight、fontSize 和 fontFamily 虽然它似乎它不允许我应用这些样式。

我需要这样做以确保内容与我的应用程序的其余部分保持一致，这是一张图片供参考。

代码如下所示：

<View style={{ flex: 2 }}>
  <WebView
    source={{ html: canjeableDetail?.description }}
    style={{
      marginTop: 6,
      marginLeft: 16,
      marginRight: 16,
    }}
  />
</View>;

【问题讨论】：

标签： react-native webview

【解决方案1】：

通过使用 InjectJavaScript 设法解决了这个问题，然后我可以应用一些基本样式，但我必须进行一些更改。

// Inject JS for styling
// Original Styling
// lineHeight: 20,
// fontFamily: "Montserrat",
// fontSize: responsiveFontSize(1.6),
const docStyle = `
  document.body.style.fontSize = ${responsiveFontSize(4)};
  document.body.style.lineHeight = 1.7;
  document.body.style.fontFamily = "Montserrat";
  `;

<View style={{ flex: 2 }}>
  <WebView
    source={{ html: canjeableDetail?.description }}
    style={{
      marginTop: 6,
      marginLeft: 16,
      marginRight: 16,
    }}
    injectedJavaScript={docStyle}
  />
</View>;

【讨论】：