7 ответов:
Рекомендуемый путь состоит в том, чтобы создать свой собственный компонент, таких как MyAppText. MyAppText - это простой компонент, который визуализирует текстовый компонент с использованием вашего универсального стиля и может проходить через другие реквизиты и т. д.
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';Затем создайте пользовательский стиль / реквизит, который вы хотите для react-native
Textкомпонент. В вашем случае вы хотите, чтобы fontFamily работал над каждым компонентомText.const customTextProps = { style: { fontFamily: yourFont } }Вызовите функцию
setCustomTextи передайте в нее свой реквизит/стили.setCustomText(customTextProps);И тогда все компоненты react-native
Textбудут иметь ваше объявленное fontFamily наряду с любыми другими реквизитами/стилями, которые вы предоставляете.
Добавьте
Text.defaultProps.style = { fontFamily: 'some-font' }в конструктор приложения.файл js (или любой корневой компонент, который у вас есть).
С React-Native 0.56 вышеописанный метод изменения
Text.prototype.renderбольше не работает, поэтому вам придется использовать свой собственный компонент, который можно сделать в одной строке!Мой текст.js
export default props => <Text {...props} style={[{fontFamily: 'Helvetica'}, props.style]}>{props.children}</Text>Еще один компонент.js
import Text from './MyText'; ... <Text>This will show in default font.</Text> ...
Вы можете переопределить поведение текста, добавив его в любой из ваших компонентов с помощью Text:
let oldRender = Text.prototype.render; Text.prototype.render = function (...args) { let origin = oldRender.call(this, ...args); return React.cloneElement(origin, { style: [origin.props.style, {color: 'red', fontFamily: 'Arial'}] }); };Edit: поскольку 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: [origin.props.style, {color: 'red', fontFamily: 'Arial'}] }); };
Добавьте эту функцию в корневой компонент
App, а затем запустите ее из конструктора после добавления шрифта, используя следующие инструкции. https://medium.com/react-native-training/react-native-custom-fonts-ccc9aacf9e5eimport {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/``
Теперь давайте добавим" React Native " NPM в наш пакет.json
"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-BookVerlag-BlackItalicVerlag-BoldItalicVerlag-XLightVerlag-BoldVerlag-BlackVerlag-XLightItalicVerlag-LightItalicVerlag-BookItalicVerlag-LightТеперь это чувствительные к регистру имена, которые мы можем использовать в нашем семействе шрифтов, которые мы можем использовать в нашем react native апп.
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]]; .... }Готово.


Comments