Как установить семейство шрифтов по умолчанию в React Native?
есть ли эквивалент этого CSS в React Native, так что приложение использует один и тот же шрифт везде ?
body {
font-family: 'Open Sans';
}
применение его вручную на каждом текстовом узле кажется чрезмерно сложным.
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 и передать ваши реквизиты/стили в функцию.
setCustomText(customTextProps);
а потом все реагируют-родной
Text
компоненты будут иметь ваш объявленный fontFamily наряду с любыми другими реквизитами/стилями, которые вы предоставляете.
добавить
Text.defaultProps.style = { fontFamily: 'some-font' }
в конструкторе приложения.JS-файл (или любой корневой компонент, который у вас есть).
С React-Native 0.56, вышеуказанный метод изменения
Text.prototype.render
больше не работает, поэтому вам нужно использовать свой собственный компонент, который можно сделать в одной строке!MyText.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 runcode 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.
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]]; .... }
сделано.