在 React Native 中设置 WebView 内联样式 HTML

Question

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

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

代码如下所示：

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

Answer 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>;

在 React Native 中设置 WebView 内联样式 HTML

Style WebView Inline HTML in React Native

webview

react-native