react-native-render-html FontFamily属性不起作用
react-native-render-html FontFamily属性不起作用
提问于 2020-08-28 11:07:18
今天，我尝试使用这个库在我的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ấ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ối amoni của axit cacboxylic đa chức; chấ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ối amoni của một amino axit. Cho m gam E gồm X và Y (có tỉ lệ mol tương ứng là 3 : 5) tác dụng hết với lượng dư dung dịch NaOH đun nóng, thu được 4,928 lít (đktc) hỗn hợp khí (gồm 2 chất hữu cơ là đồng đẳng liên tiếp) có tỉ khối so với hiđro bằng 383/22 và 19,14 gam hỗn hợp muối. Phần trăm khố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标记中，它仍然不会呈现。它只呈现color和fontStyle属性。有人能帮我解决这个问题吗？
回答 2
Stack Overflow用户
发布于 2021-09-04 00:44:56
您需要设置systemFonts属性：
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组件中设置react- systemFonts -render-html v:6.0.0 >并确保具有react-native-render-html v:6.0.0>非常重要
请查看他们关于此systemFonts属性的文档
Stack Overflow用户
发布于 2020-08-28 16:34:07
我试着在这里的世博会小吃中重现你的例子：https://snack.expo.io/@jsamr/stack-overflow-63626884
如果您查看右侧的Web渲染器，您将注意到显示了适当的字体(在本例中为等宽字体)。您确定已正确配置字体吗？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63626884
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号