Есть ли в React Native эквивалент этому CSS, чтобы приложение везде использовало один и тот же шрифт?
body {
font-family: 'Open Sans';
}
Применение его вручную к каждому текстовому узлу кажется чрезмерно сложным.
источник
Есть ли в React Native эквивалент этому CSS, чтобы приложение везде использовало один и тот же шрифт?
body {
font-family: 'Open Sans';
}
Применение его вручную к каждому текстовому узлу кажется чрезмерно сложным.
Рекомендуемый способ - создать собственный компонент, например MyAppText. MyAppText будет простым компонентом, который отображает компонент Text с использованием вашего универсального стиля и может передавать другие свойства и т. Д.
https://facebook.github.io/react-native/docs/text.html#limited-style-inheritance
render()
вместо конструктора. Использование крючков с useMemo
также может помочь, если важна эффективность. В качестве альтернативы, если вы хотите сохранить его в конструкторе, важно добавить componentDidUpdate
логику, которая обновляется, this.style
когда компонент обновляется из-за изменения свойства стиля.
Недавно был создан модуль узла, который решает эту проблему, поэтому вам не нужно создавать другой компонент .
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);
И тогда все Text
компоненты, поддерживающие реакцию, будут иметь ваше объявленное fontFamily вместе с любыми другими предоставленными вами реквизитами / стилями.
<Text style={styles.text}>
?? Это не идеальное решение, как у этого body {font-family: 'Open Sans';}
есть какое-либо решение для обновления?
Text style={styles.text}>
. Вам просто нужно объявить свои собственные реквизиты где-нибудь в вашем приложении, и они будут применены ко всем вашим текстовым компонентам. Это очень похоже наbody {font-family: ....}
Для React Native 0.56.0+ сначала проверьте, определен ли defaultProps:
Text.defaultProps = Text.defaultProps || {}
Затем добавьте:
Text.defaultProps.style = { fontFamily: 'some_font' }
Добавьте указанное выше в конструктор файла App.js (или любого имеющегося у вас корневого компонента).
Чтобы переопределить стиль, вы можете создать объект стиля и распространить его, а затем добавить свой дополнительный стиль (например { ...baseStyle, fontSize: 16 }
)
defaultProps
, не существовало, когда были написаны все остальные ответы, но, похоже, это способ сделать это сейчас.
style
опцию, скажем, для настройки стилей отдельных Text
компонентов
style
опору в компоненте Text, шрифт по умолчанию будет заменен.
Вы можете переопределить поведение 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]
});
};
В 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>
...
useRef
. reactjs.org/docs/hooks-reference.html#useref
Добавьте эту функцию в корневой 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;
}
};
}
}
const App = StackNavigator({...})
и export default App
где именно, я не думаю, что могу использовать здесь конструктор?
Супер поздно к этой теме, но вот оно.
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/
static/
fonts/
``
Теперь давайте добавим NPM "React Native" в наш package.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, например:
Затем вы можете добавить следующий блок в свой, 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]];
....
}
Выполнено.
Это работает для меня: добавить собственный шрифт в React Native
загрузите свои шрифты и поместите их в папку assets / fonts, добавьте эту строку в package.json
"rnpm": {
"assets": ["assets/fonts/Sarpanch"]}
затем откройте терминал и запустите эту команду: response-native link
Теперь ты в порядке. Для более подробного шага. перейдите по ссылке выше
Добавить
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
в package.json
том запуститьreact-native link
Установить в package.json
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
И ссылка на реакцию на родную ссылку