有没有办法在react native中全局设置字体？

Question

是否可以在react native中全局设置字体？ 我需要做的是在整个应用程序中应用每个Text组件的自定义字体。 非常感谢您的帮助，谢谢

Answer 1

一种创建RN Text的包装的方式，例如说MyTextCustomFont。

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

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

其他是定义样式对象并导入，可以在任何需要的地方使用

Answer 2

为此，我们必须实现一个方法，在该方法中，我们将覆盖react native中的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中，您必须执行以下操作：-

从'./src/utils/typography'导入{排版}

typography（）

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

Answer 3

是

app.js

import styles from './styles';
{...}
 <Text style={styles.text}>hello World </Text>
{...}

styles.js

import {StyleSheet} from 'react-native';

const styles = StyleSheet.create({
 text: {
    // define your font or size or whatever you want to style here
  },

在每个文本上使用样式，所有更改都会影响所有文本组件

Answer 4

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

1。将自定义字体添加到资产中

将所需的所有字体文件添加到react native项目根目录中的“ assets / fonts”文件夹中：

2。编辑Package.json

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

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

3。链接资产文件

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

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 5

所以，我前段时间已经很轻松地制作了一个组件。这是与Expo一起使用的，我不知道是原生的原生反应。

在应用程序的开头：

import { Font, Asset } from 'expo'

async initFont() {
    try {
      await Font.loadAsync({
        'Bariol': require('src/assets/font/Bariol_Regular.otf'),
        'Bariol Bold': require('src/assets/font/Bariol_Bold.otf'),
      })
      this.setState({ fontReady: true })
    } catch (e) {
      console.log(e)
    }
  }

然后，您必须创建一个包含以下代码的组件文件，例如text.js：

export default function (props) {
  let font = { fontFamily: 'Bariol' }
  if (props.bold) {
    font = { fontFamily: 'Bariol Bold' }
  }

  const { bold, style, children, ...newProps } = props
  return (
    <Text {...newProps} style={[Style.text, props.style, font]}>
      {props.children}
    </Text>
  )
}

最后，在任何其他组件/页面中，只需导入MyText：

import Text from 'path/to/text.js'

像普通的Text组件一样使用它：

<Text bold>Hello World!</Text>

即使此解决方案看上去比其他解决方案都复杂一点，但只要安装成功，它就更容易使用，因为您只需导入文本即可。

Answer 6

您可以通过在任何使用 Text 的组件中添加此内容来覆盖 Text 行为：

编辑：将此代码添加到您的 App.js 或主文件中

let oldRender = Text.render;
Text.render = function (...args) {
    let origin = oldRender.call(this, ...args);
    return React.cloneElement(origin, {
        style: [{color: 'red', fontFamily: 'Arial'}, origin.props.style]
    });
} 

对于 React Native 0.56 或以下版本，将此代码添加到您的 App.js 或主文件中

let oldRender = Text.prototype.render;
Text.prototype.render = function (...args) {
    let origin = oldRender.call(this, ...args);
    return React.cloneElement(origin, {
        style: [{color: 'red', fontFamily: 'Arial'}, origin.props.style]
    });
};

Reference 或create your own component, such as MyAppText. MyAppText 将是一个简单的组件，它使用您的通用样式呈现一个 Text 组件，并且可以通过其他道具等。