Чи існує еквівалент цього CSS у React Native, щоб програма використовувала однаковий шрифт скрізь?

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

Застосування його вручну на кожному вузлі Text здається надто складним.

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

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

Нещодавно був створений модуль вузла, який вирішує цю проблему, тому вам не потрібно створювати інший компонент .

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 разом з будь-яким іншим реквізитом / стилем, який ви надаєте.

Для React Native 0.56.0+ перевірте, чи спочатку визначено defaultProps:

Text.defaultProps = Text.defaultProps || {}

Потім додайте:

Text.defaultProps.style =  { fontFamily: 'some_font' }

Додайте вищевказане в конструктор файлу App.js (або будь-який кореневий компонент, який у вас є).

Щоб замінити стиль, ви можете створити об'єкт стилю та розповсюдити його, а потім додати свій додатковий стиль (наприклад { ...baseStyle, fontSize: 16 })

Ви можете замінити поведінку тексту, додавши це до будь-якого з компонентів за допомогою тексту:

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

Додати

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

в package.json потім запуститиreact-native link

З 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>
...

Додайте цю функцію до кореневого 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;
            }
        };
    }
}

Супер пізно до цієї теми, але тут все йде.

TLDR; Додайте наступний блок у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" у наш пакет.json

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

Тепер ми можемо запустити "реагувати на рідне посилання", щоб додати наші ресурси до наших рідних додатків.

Перевірка або виконання вручну.

Це має додати ваші імена шрифтів до проектів .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

Це тепер чутливі до регістру імена, які ми можемо використовувати в нашому сімействі шрифтів, які ми можемо використовувати в нашому рідному додатку для реагування.

Зрозуміло, тепер встановлено шрифт за замовчуванням.

Потім встановити шрифт за замовчуванням, щоб додати назву вашої родини шрифтів 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]];
  ....
}

Готово.

Встановити в package.json

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

І посилання реакція-рідне посилання

Це працює для мене: додайте власний шрифт у React Native

завантажте шрифти та розмістіть їх у папці resources / fonts, додайте цей рядок у package.json

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

потім відкрийте термінал і запустіть цю команду: response-native link

Тепер вам добре йти. Для більш детального кроку. відвідайте вищезгадане посилання