react-native-render-html FontFamily属性不工作

brjng4g3 于 2023-10-22 发布在 React

关注(0)|答案(4)|浏览(124)

今天，我尝试使用这个库在我的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';">) là mu&ocirc;́i amoni củ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';">) là mu&ocirc;́i amoni của một amino axit. Cho m gam E g&ocirc;̀m X và Y (có tỉ lệ mol tương ứng là 3 : 5) tác dụng h&ecirc;́t với lượng dư dung dịch NaOH đun nóng, thu được 4,928 lít (đktc) h&ocirc;̃n hợp khí (g&ocirc;̀m 2 ch&acirc;́t hữu cơ là đ&ocirc;̀ng đẳng liên ti&ecirc;́p) có tỉ kh&ocirc;́i so với hiđro bằng 383/22 và 19,14 gam h&ocirc;̃n hợp mu&ocirc;́i. Ph&acirc;̀n trăm kh&ocirc;́i lượng của Y trong E là </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属性。谁能帮我解决这个问题？

react-native

来源：https://stackoverflow.com/questions/63626884/react-native-render-html-fontfamily-attribute-not-working

4条答案

按热度按时间

2vuwiymt1#

您需要设置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的文档

赞(0）回复(0）举报 2023-10-22

okxuctiv2#

您需要设置systemFonts Prop：

<RenderHTML systemFonts={['IRANSansX-Bold']} />

赞(0）回复(0）举报 2023-10-22

0x6upsns3#

我试着在这里的世博小吃中重现你的例子：https://snack.expo.io/@jsamr/stack-overflow-63626884
如果您查看右侧的Web呈现器，您会注意到显示了适当的字体（在本例中为等宽字体）。你确定字体配置正确吗？

赞(0）回复(0）举报 2023-10-22

sulc1iza4#

file.js:

import React, { useEffect, useState } from 'react';
import { Text, View, StyleSheet, Dimensions, Pressable, Image } from 'react-native';
import RenderHtml , { defaultSystemFonts } from 'react-native-render-html';

const CustomComponent = (props) => {
const { width } = Dimensions.get('screen')
const systemFonts = [...defaultSystemFonts, global.fontRegular];
return (
        <>
                   {props.recepie?.data.description &&
                        <RenderHtml
                            contentWidth={width - 30}
                            source={{ html: `<html><body> 
                           <p>${props.recepie?.data.description}</p></body> 
                             </html>` }}
                            tagsStyles={mixedStyle}
                            systemFonts={systemFonts}
                        />}
        </>
    );
};
const mixedStyle = {
    body: {
        fontFamily: 'your global font name',
        color: '#212121'
    },
    p: {
        fontFamily: 'your global font name',
    }
}
export default CustomComponent ;

赞(0）回复(0）举报 2023-10-22

我来回答

react-native-render-html FontFamily属性不工作

4条答案

相关问题

热门标签

最新问答