在 react native 中使用 fontFamily 时 fontWeight 不起作用答案

【问题标题】：fontWeight doesnt work when using fontFamily in react native在 react native 中使用 fontFamily 时 fontWeight 不起作用
【发布时间】：2021-02-18 17:46:16
【问题描述】：

我在我的文件夹中添加了作为 customFont 的 Rubik-regular：

const customFonts = {
  RubikRegular: require('./assets/fonts/Rubik-Regular.ttf'),
};

问题是，如果我使用这样的字体：

               <Text style={{fontFamily: 'RubikRegular'}}>6453 </Text>

这一切都很好。但是，当我想给 fontWeight 我的文字时：

<Text style={{fontFamily: 'RubikRegular', fontWeight: 'bold'}}>6453 </Text>

fontWeight 不起作用。如果我删除 fontFamily 那么它可以工作。这里有什么问题我不明白

【问题讨论】：

这可能会帮助你stackoverflow.com/questions/61032122/…

标签： react-native

【解决方案1】：

你添加Rubik-regular字体，意味着你只添加了regular（400）Rubik字体的权重。

如果要使用fontWeight: 'bold'，则必须添加Rubik-bold字体

【讨论】：

【解决方案2】：

你可以这样做

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import SVG, { Path } from 'react-native-svg';

function ManBodySVG(props: Props) {
    const [defaultOpacity, setDefault] = useState(10);

    return (
        <View style={styles.manBodyContainer}>
            <View style={styles.frontBody}>
                <SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 303.08 958.84" height={height} width={width}>
                    <Path
                        d="M172.47,123c-7.65,0-17.12-4.25-23.9-17.81C138.24,84.51,133,50.37,134.47,41c3.46-21.93,18.08-41,38-41,20.31,0,34.25,15.69,39.26,37.19,2.15,9.25-1.7,45-13.63,68.17C191.34,118.51,178.5,123,172.47,123Z"
                        fillOpacity={`${(defaultOpacity / 100).toString()}`}
                        fill="black"
                    />
                    <Path
                        d="M162.83,153.88a2,2,0,0,0,1.91-2.54,97.07,97.07,0,0,0-8.5-20.07c-1.45-2.57-4.57-5.56-7.46-8.36A11.43,11.43,0,0,0,135.51,121c-11,5.77-31.38,16-45.4,20.78a43,43,0,0,0-8.79,4,2,2,0,0,0,.88,3.68c4.24.4,10.45.91,14.84,1,7.28.08,38.68-4.22,54.26,3.55C156.39,156.52,159.36,154,162.83,153.88Z"
                        fillOpacity={`${(dmgNeck / 100).toString()}`}
                        fill="black"
                    />
...

【讨论】：