Ответ 1

Рекомендуемый способ - создать свой собственный компонент, такой как MyAppText. MyAppText будет простым компонентом, который отображает компонент Text, используя ваш универсальный стиль, и может проходить через другие реквизиты и т.д.

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

Ответ 2

Недавно был создан модуль node, который решает эту проблему, чтобы не иметь создать другой компонент.

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';

Затем создайте пользовательский стиль/реквизит, который вы хотите для компонента-ответчика Text. В вашем случае вы хотите, чтобы функция fontFamily работала над каждым компонентом Text.

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

Вызвать функцию setCustomText и передать свои реквизиты/стили в функцию.

setCustomText(customTextProps);

И тогда все компоненты-ответчики Text будут иметь ваш объявленный fontFamily вместе с любыми другими реквизитами/стилями, которые вы предоставляете.

Ответ 3

Добавьте Text.defaultProps.style = { fontFamily: 'some-font' } в конструктор файла App.js(или любой корневой компонент, который у вас есть).

Ответ 4

Вы можете переопределить поведение текста, добавив его в любой из ваших компонентов, используя текст:

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

Ответ 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>
...

Ответ 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;
            }
        };
    }
}

Ответ 7

Супер поздно в этой теме, но здесь идет.

TL;DR; Добавьте следующий блок в ваш 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/

"""

Теперь давайте добавим NPM "React Native" в наш package.json

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

Теперь мы можем запустить "реакцию-нативную ссылку", чтобы добавить наши активы в наши нативные приложения.

Проверять или делать вручную.

Это должно добавить ваши имена шрифтов в проекты .plist (для пользователей code ios/*/Info.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

Теперь это регистрозависимые имена, которые мы можем использовать в нашем семействе шрифтов, которые мы можем использовать в нашем собственном приложении реакции.

Got -'em теперь установил шрифт по умолчанию.

Затем установить шрифт по умолчанию, чтобы добавить семейство шрифтов в 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]];
  ....
}

Готово.

Ответ 8

Это работает для меня: добавить пользовательский шрифт в React Native

скачайте ваши шрифты и поместите их в папку assets/fonts, добавьте эту строку в package.json

 "rnpm": {
"assets": ["assets/fonts/Sarpanch"]}

затем откройте терминал и выполните команду: response-native link

Теперь вы готовы идти. Для более подробного шага. перейдите по ссылке выше