如何在React Native中设置默认字体系列？

Question

在React Native中是否存在与此CSS相同的内容,以便应用程序在任何地方使用相同的字体？

body {
  font-family: 'Open Sans';
}

在每个Text节点上手动应用它似乎过于复杂.

Answer 1

有最近,有人这样你解决这个问题的一个节点模块并不需要创建另一个组件.

https://github.com/Ajackster/react-native-global-props

https://www.npmjs.com/package/react-native-global-props

文档指出在最高阶组件中,导入这样的setCustomText函数.

import { setCustomText } from 'react-native-global-props';

然后,为react-native Text组件创建所需的自定义样式/道具.在您的情况下,您希望fontFamily可以处理每个Text组件.

const customTextProps = { 
  style: { 
    fontFamily: yourFont
  }
}

调用该setCustomText函数并将您的道具/样式传递给该函数.

setCustomText(customTextProps);

然后所有react-native Text组件都会将您声明的fontFamily与您提供的任何其他道具/样式一起使用.

Answer 2

建议的方法是创建自己的组件,例如MyAppText.MyAppText将是一个简单的组件,它使用您的通用样式呈现Text组件,并可以通过其他道具等.

https://facebook.github.io/react-native/docs/text.html#limited-style-inheritance

Answer 3

添加{ ...baseStyle, fontSize: 16 }App.js文件的构造函数(或您拥有的任何根组件).

Answer 4

您可以使用Text在任何组件中添加它来覆盖Text行为:

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]
    });
};

编辑:自React Native 0.56以来,Text.prototype不再工作了.你需要删除.prototype:

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]
    });
};

Answer 5

使用React-Native 0.56,上面的更改方法Text.prototype.render不再起作用,所以你必须使用自己的组件,这可以在一行中完成!

MyText.js

export default props => <Text {...props} style={[{fontFamily: 'Helvetica'}, props.style]}>{props.children}</Text>

AnotherComponent.js

import Text from './MyText';

...
<Text>This will show in default font.</Text>
...

Answer 6

将此函数添加到根App组件,然后在使用这些说明添加字体后从构造函数中运行它.https://medium.com/react-native-training/react-native-custom-fonts-ccc9aacf9e5e

import {Text, TextInput} from 'react-native'

SetDefaultFontFamily = () => {
    let components = [Text, TextInput]

    const customProps = {
        style: {
            fontFamily: "Rubik"
        }
    }

    for(let i = 0; i < components.length; i++) {
        const TextRender = components[i].prototype.render;
        const initialDefaultProps = components[i].prototype.constructor.defaultProps;
        components[i].prototype.constructor.defaultProps = {
            ...initialDefaultProps,
            ...customProps,
        }
        components[i].prototype.render = function render() {
            let oldProps = this.props;
            this.props = { ...this.props, style: [customProps.style, this.props.style] };
            try {
                return TextRender.apply(this, arguments);
            } finally {
                this.props = oldProps;
            }
        };
    }
}

Answer 7

这个线程已经很晚了，但是就到这里了。

太长了；在您的中添加以下块AppDelegate.m

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{

 ....
    // HERE: replace "Verlag" with your font
  [[UILabel appearance] setFont:[UIFont fontWithName:@"Verlag" size:17.0]];
  ....
}

整个流程的演练。

除了使用插件之外，您还可以通过几种方法来做到这一点，react-native-global-props我将逐步引导您完成此操作。

将字体添加到平台。

如何将字体添加到IOS项目中

首先让我们为我们的资产创建一个位置。让我们在根目录中创建以下目录。

````

ios/
static/
       fonts/

````

现在让我们在 package.json 中添加一个“React Native”NPM

  "rnpm": {
    "static": [
   "./static/fonts/"
    ]
  }

现在我们可以运行“react-native link”将我们的资产添加到我们的本机应用程序中。

验证或手动执行。

这应该将您的字体名称添加到项目中.plist （供 VS 代码用户运行code ios/*/Info.plist以确认）

这里我们假设Verlag是您添加的字体，它应该看起来像这样：

     <dict>
   <plist>
      .....
      <key>UIAppFonts</key>
      <array>
         <string>Verlag Bold Italic.otf</string>
         <string>Verlag Book Italic.otf</string>
         <string>Verlag Light.otf</string>
         <string>Verlag XLight Italic.otf</string>
         <string>Verlag XLight.otf</string>
         <string>Verlag-Black.otf</string>
         <string>Verlag-BlackItalic.otf</string>
         <string>Verlag-Bold.otf</string>
         <string>Verlag-Book.otf</string>
         <string>Verlag-LightItalic.otf</string>
      </array>
      ....    
</dict>
</plist>

现在您已经映射了它们，现在让我们确保它们确实存在并正在加载（这也是您手动执行此操作的方式）。

转到"Build Phase" > "Copy Bundler Resource"，如果不起作用，您可以在此处手动添加。

获取字体名称（XCode 识别）

首先打开你的 XCode 日志，例如：

然后您可以在您的文件中添加以下块AppDelegate.m来记录字体和字体系列的名称。

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    .....


  for (NSString* family in [UIFont familyNames])
  {
    NSLog(@"%@", family);
    for (NSString* name in [UIFont fontNamesForFamilyName: family])
    {
      NSLog(@" %@", name);
    }
  }

  ...
}

运行后，如果正确加载，您应该会找到您的字体，在这里我们在日志中找到了我们的字体，如下所示：

2018-05-07 10:57:04.194127-0700 MyApp[84024:1486266] Verlag
2018-05-07 10:57:04.194266-0700 MyApp[84024:1486266]  Verlag-Book
2018-05-07 10:57:04.194401-0700 MyApp[84024:1486266]  Verlag-BlackItalic
2018-05-07 10:57:04.194516-0700 MyApp[84024:1486266]  Verlag-BoldItalic
2018-05-07 10:57:04.194616-0700 MyApp[84024:1486266]  Verlag-XLight
2018-05-07 10:57:04.194737-0700 MyApp[84024:1486266]  Verlag-Bold
2018-05-07 10:57:04.194833-0700 MyApp[84024:1486266]  Verlag-Black
2018-05-07 10:57:04.194942-0700 MyApp[84024:1486266]  Verlag-XLightItalic
2018-05-07 10:57:04.195170-0700 MyApp[84024:1486266]  Verlag-LightItalic
2018-05-07 10:57:04.195327-0700 MyApp[84024:1486266]  Verlag-BookItalic
2018-05-07 10:57:04.195510-0700 MyApp[84024:1486266]  Verlag-Light

现在我们知道它加载了该Verlag系列并且是该系列内的字体

• Verlag-Book
• Verlag-BlackItalic
• Verlag-BoldItalic
• Verlag-XLight
• Verlag-Bold
• Verlag-Black
• Verlag-XLightItalic
• Verlag-LightItalic
• Verlag-BookItalic
• Verlag-Light

现在，我们可以在我们的 React Native 应用程序中使用的字体系列中使用这些区分大小写的名称。

得到了 - 现在设置默认字体。

然后设置默认字体以 AppDelegate.m使用此行在您的字体中添加您的字体系列名称

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{

 ....
    // ADD THIS LINE (replace "Verlag" with your font)

  [[UILabel appearance] setFont:[UIFont fontWithName:@"Verlag" size:17.0]];
  ....
}

完毕。