@carimus/react-native-fonts

反应原生软件包,为自定义字体的工作提供一些基本的公用事业和工具.

动机

React Introduct在如何处理自定义字体方面有缺陷. 有很多工作,但是如果你使用自定义字体 在应用的很多地方, 他们可以变得繁琐.

该寄存器旨在提供方便生成特定平台的帮助 Text Style Props 用于自定义字体, esp 使用不同的字体文件来表达所有重心和样式.

示例

首先,确保字体文件存储在您通过设置的项目资产目录中 react-native.config.js 而且你已经跑 react-native link 为了将字体文件链接到您的本地iOS和Android代码.

那你需要创建一个 FontRegistry 通过提供 createFontRegistry 函数 a Map 字体姓氏 以到其文件的数组。 文件以下列形式定义: FontFileDefinition 描述何时的对象 字体应当取出,并如何在RN样式(该样式依赖平台)内引用.

一旦有了字体注册,您就可以使用它 createFontStyles 生成平台特定字体样式的方法 您已注册的字体家族, 以及任何重量和样式的变异( 在您的文件中找到最接近的匹配) name 定义).

import { View, Text } from 'react-native';
import { createFontRegistry } from '@carimus/react-native-fonts';

const fonts = new Map([
    [
        'Montserrat',
        [
            { name: 'Montserrat-Regular', weight: 400, style: 'normal' },
            { name: 'Montserrat-Italic', weight: 400, style: 'italic' },
            { name: 'Montserrat-Bold', weight: 700, style: 'normal' },
            { name: 'Montserrat-BoldItalic', weight: 700, style: 'italic' },
            { name: 'Montserrat-ExtraBold', weight: 800, style: 'normal' },
            {
                name: 'Montserrat-ExtraBoldItalic',
                weight: 800,
                style: 'italic',
            },
            { name: 'Montserrat-Light', weight: 300, style: 'normal' },
            { name: 'Montserrat-LightItalic', weight: 300, style: 'italic' },
            { name: 'Montserrat-Thin', weight: 250, style: 'normal' },
            { name: 'Montserrat-ThinItalic', weight: 250, style: 'italic' },
        ],
    ],
]);

const { createFontStyles } = createFontRegistry(fonts);

function MyComponent() {
    return (
        <View>
            <Text style={createFontStyles('Montserrat')}>Some normal text</Text>
            <Text style={createFontStyles('Montserrat', { weight: 700 })}>
                Some bold text
            </Text>
            <Text
                style={{
                    ...createFontStyles('Montserrat', {
                        weight: 700,
                        style: 'italic',
                    }),
                    color: '#FF0000',
                }}
            >
                Some bold, italic, red text.
            </Text>
        </View>
    );
}

重要说明

• 你用得着 丰特德罗普! 以快速获得像重量一样的信息(usWeightClass),样式 (单位:千美元)fontSubfamily 有点,你必须推断出:"重力斜体"或者任何含有"意大利"这个词的东西 翻译为 'italic';其他所有如"正则","重","黑色"等都译为: 'normal'),以及 postScriptName。 。 。 .
• iOS要求您使用 postScriptName 当你提到一个 fontFamily 在RN文本样式道具,但在Android, 您必须在没有扩展名的情况下使用字体的文件名。 因此,一般来说,你应该命名您的字体文件这样 文件名 w/o 扩展名与 postScriptName 字体。 如果你这样做,你可以使用 name 属性在字体文件定义对象中,如上面“Montserrat”的例子所示。 如果文件名不同 无论来自什么原因 postScriptName,必须明确指定 postScriptName 财务报告和审定财务报表 fileName 换句话说.
• 这个 weight 必须在 100 财务报告和审定财务报表 900 递增数 50。 。 。 .
• 这个 style 肯定就是那个 'normal' 或者说 italic。 。 。 .

开始

• 更详细的文件,而不只是一个例子.