2

今天我尝试使用这个库在我的 React Native 应用程序中渲染原始 html。这是我的代码：

import HTML from "react-native-render-html";
const htmlContent = `
<div class="page" title="Page 5">
<div class="layoutArea">
<div class="column">
<p><span style="font-size: 11.000000pt; font-family: 'TimesNewRomanPSMT';">Ch&acirc;́t X (C</span><span style="font-size: 7.000000pt; font-family: 'TimesNewRomanPSMT'; vertical-align: -1.000000pt;">x</span><span style="font-size: 11.000000pt; font-family: 'TimesNewRomanPSMT';">H</span><span style="font-size: 7.000000pt; font-family: 'TimesNewRomanPSMT'; vertical-align: -1.000000pt;">y</span><span style="font-size: 11.000000pt; font-family: 'TimesNewRomanPSMT';">O</span><span style="font-size: 7.000000pt; font-family: 'TimesNewRomanPSMT'; vertical-align: -1.000000pt;">4</span><span style="font-size: 11.000000pt; font-family: 'TimesNewRomanPSMT';">N</span><span style="font-size: 7.000000pt; font-family: 'TimesNewRomanPSMT'; vertical-align: -1.000000pt;">2</span><span style="font-size: 11.000000pt; font-family: 'TimesNewRomanPSMT';">) là mu&ocirc;́i amoni của axit cacboxylic đa chức; ch&acirc;́t Y (C</span><span style="font-size: 7.000000pt; font-family: 'TimesNewRomanPSMT'; vertical-align: -1.000000pt;">m</span><span style="font-size: 11.000000pt; font-family: 'TimesNewRomanPSMT';">H</span><span style="font-size: 7.000000pt; font-family: 'TimesNewRomanPSMT'; vertical-align: -1.000000pt;">n</span><span style="font-size: 11.000000pt; font-family: 'TimesNewRomanPSMT';">O</span><span style="font-size: 7.000000pt; font-family: 'TimesNewRomanPSMT'; vertical-align: -1.000000pt;">2</span><span style="font-size: 11.000000pt; font-family: 'TimesNewRomanPSMT';">N</span><span style="font-size: 7.000000pt; font-family: 'TimesNewRomanPSMT'; vertical-align: -1.000000pt;">2</span><span style="font-size: 11.000000pt; font-family: 'TimesNewRomanPSMT';">) là mu&ocirc;́i amoni của một amino axit. Cho m gam E g&ocirc;̀m X và Y (có tỉ lệ mol tương ứng là 3 : 5) tác dụng h&ecirc;́t với lượng dư dung dịch NaOH đun nóng, thu được 4,928 lít (đktc) h&ocirc;̃n hợp khí (g&ocirc;̀m 2 ch&acirc;́t hữu cơ là đ&ocirc;̀ng đẳng liên ti&ecirc;́p) có tỉ kh&ocirc;́i so với hiđro bằng 383/22 và 19,14 gam h&ocirc;̃n hợp mu&ocirc;́i. Ph&acirc;̀n trăm kh&ocirc;́i lượng của Y trong E là </span></p>
</div>
</div>
</div>
`;

const App = () => {

  return (

    <ScrollView style={{ flex: 1 }}>
      <HTML
        html={htmlContent} tagsStyles={{
          span: { fontFamily: 'TimesNewRomanPSMT', color:'red' }
        }}
        imagesMaxWidth={Dimensions.get("window").width}
      />
    </ScrollView>
    // <Text style={{ fontFamily: 'TimesNewRomanPSMT', fontSize: 44 }}>affdf</Text>

  );
};

我下载了字体并成功链接。下面Text已经成功渲染。但是在 HTML 标签中它仍然没有呈现。它只呈现colorandfontStyle属性。谁能帮我解决这个问题？

4

2 回答 2

4

您需要设置systemFonts Prop：

import RenderHtml, { defaultSystemFonts } from 'react-native-render-html';
const systemFonts = [...defaultSystemFonts, 'Montserrat-Regular', 'Montserrat-Bold'];
<RenderHtml 
  contentWidth={Dimensions.get('window').width}
  source={{ html: htmlSource }} 
  tagsStyles={{a: {color:'#58585A',textDecorationLine:'none', fontSize:16, fontFamily:'Montserrat-Bold',lineHeight: 23},p:{**fontFamily:'Montserrat-Regular**',lineHeight: 23,color:'#58585A',fontSize:16,marginBottom:16}, img:{display: 'none'}}} 
  systemFonts={systemFonts}
                  />

在 RenderHtml 组件中设置 systemFonts Prop 并确保您有 react-native-render-html v:6.0.0 >

检查他们关于这个systemFonts Prop的文档

于 2021-09-04T00:44:56.350 回答
0

我试图在这里的世博小吃中重现你的例子：https ://snack.expo.io/@jsamr/stack-overflow-63626884

如果您看一下右侧的 Web 渲染器，您会注意到显示了适当的字体（在本例中为等宽字体）。你确定你正确配置了字体吗？

于 2020-08-28T08:34:06.727 回答