有办法在React Native中全局设置字体吗？

Question

我需要创建一个自定义字体，适用于整个应用程序中的每个< code>Text组件。

有没有办法在 React Native 中全局设置字体？

Answer 1

我认为你的问题是在react native中添加自定义字体。

1.将自定义字体添加到资源

将所有想要的字体文件添加到react本机项目根目录下的“资产/字体”文件夹中：

2. Edit Package.json

将 rnpm 添加到 package.json，提供字体文件的路径：

"rnpm": {
    "assets": [
    "./assets/fonts/"
    ]
},

3.链接assest文件

在 react 本机项目根文件夹中运行此命令

react-native link

这应该在iOS的Info.plist文件中添加字体引用，并在Android上将字体文件复制到android/app/src/main/assets/fonts。

4.插件样式表

使用您的字体名称添加fontFamily属性：

const styles = StyleSheet.create({
      title: {
        fontSize: 16,
        fontFamily: 'PlayfairDisplay-Bold',
        color: '#fff',
        paddingRight: 20,
      },
    });

Answer 2

为此，我们必须实现一个方法，在该方法中，我们将覆盖React Native中的< code>Text组件创建。在这里，我们将设置默认字体系列或字体大小，或者任何我们想要默认设置的属性。

// typography.js

import React from 'react'
import { Text, Platform, StyleSheet } from 'react-native'

export const typography = () => {
  const oldTextRender = Text.render
  Text.render = function(...args) {
    const origin = oldTextRender.call(this, ...args)
    return React.cloneElement(origin, {
      style: [styles.defaultText, origin.props.style],
    })
  }
}

const styles = StyleSheet.create({
  defaultText: {
    fontFamily: 'NunitoSans-Regular',//Default font family
  }
}); 

然后在index.js你必须这样做：

import { typography } from './src/utils/typography'

typography()

详细答案如下：https://ospfolio.com/two-way-to-change-default-font-family-in-react-native/

Answer 3

一种方法是为RN Text创建一个包装器，比如MyTextCustomFont:

const MyTextCustomFont = (props) => {
   return (
        <Text style={{fontFamily:'myFont'}} {...props} >{props.children}</Text>
   )
}

导入此MyTextCustomFont并在任何地方使用。

另一种方法是定义样式对象，并在任何需要的地方使用它。