[英]react-native android fontFamily does not take effect
I add a fontFamily to index.android.js's welcome style, but it takes no effect.我在 index.android.js 的欢迎样式中添加了一个 fontFamily,但是没有任何效果。 Does fontFamily actually work on android?
fontFamily 真的可以在安卓上使用吗?
welcome:{ fontSize:20, fontFamily:'roboto-thin', textAlign:'center', margin:10}欢迎:{ fontSize:20, fontFamily:'roboto-thin', textAlign:'center', margin:10}
if fontFamily works on android, is there a way to load custom font from assets?如果 fontFamily 在 android 上工作,有没有办法从资产加载自定义字体? Or is this some feature to be implemented by react-native?
或者这是由 react-native 实现的一些功能?
For Android: Custom fonts were added with 0.16.0-rc.对于 Android:使用 0.16.0-rc 添加了自定义字体。 So you need to have 0.16.0-rc version first and after that you can just download any fonts from the web.
所以你首先需要有 0.16.0-rc 版本,然后你可以从网上下载任何字体。
react-native run-android
react-native run-android
fontFamily: 'font_name'
in your style.fontFamily: 'font_name'
。Also note the following restrictions for custom Android fonts in react-native:另请注意 react-native 中自定义 Android 字体的以下限制:
android/app/src/main/assets/fonts
android/app/src/main/assets/fonts
.ttf
files are supported.ttf
文件fontFamily
exactly.fontFamily
完全匹配。 For instance, if fontFamily
is 'Source Sans Pro'
, the file must be called Source Sans Pro.ttf
(and NOT SourceSansPro.ttf
).fontFamily
是'Source Sans Pro'
,则该文件必须命名为Source Sans Pro.ttf
(而不是SourceSansPro.ttf
)。 Any suffixes as mentioned in the following paragraph are automatically removed from the file._bold
(eg Source Sans Pro_bold.ttf
) _bold
(例如Source Sans Pro_bold.ttf
)_italic
_bold_italic
I believe the following is a cleaner alternative to the methods already explained here:我相信以下是这里已经解释的方法的更干净的替代方法:
Put all your fonts in you React-Native project directory将所有字体放在 React-Native 项目目录中
./assets/fonts/
Add the following line in your package.json在 package.json 中添加以下行
"rnpm": {
"assets": ["./assets/fonts"]
}
finally run in the terminal from your project directory最后从您的项目目录在终端中运行
$ react-native link
to use it declare this way in your styles在您的样式中使用它以这种方式声明
fontFamily: 'your-font-name without extension'
If your font is Raleway-Bold.ttf then,如果你的字体是Raleway-Bold.ttf那么,
fontFamily: 'Raleway-Bold'
Source https://medium.com/@danielskripnik/how-to-add-and-remove-custom-fonts-in-react-native-b2830084b0e4来源https://medium.com/@danielskripnik/how-to-add-and-remove-custom-fonts-in-react-native-b2830084b0e4
Hello this issue waist for me more than two days with "El+Messiri" font " https://fonts.google.com/specimen/El+Messiri "你好这个问题腰对我来说超过两天了“El+Messiri”字体“ https://fonts.google.com/specimen/El+Messiri ”
i was doing every think write :我正在做每一个思考写:
you can use fontFamily: 'ElMessiri-Regular' in your style.您可以在您的风格中使用 fontFamily: 'ElMessiri-Regular'。
but the fault was that am using fontWeight : 'bold' after fontFamily: 'ElMessiri-Regular' and the fontWeight was overiding the fontFamily because "El+Messiri" font has his own fontFamily bold wich is "ElMessiri-Bold"但错误在于我在fontFamily: 'ElMessiri-Regular '之后使用了fontWeight : 'bold'并且 fontWeight 覆盖了 fontFamily 因为“El+Messiri”字体有他自己的 fontFamily 粗体,即“ElMessiri-Bold”
It seems like custom font was added, check out this commit:似乎添加了自定义字体,请查看此提交:
https://github.com/facebook/react-native/commit/bfeaa6a4f531cfc18c097bc9ffb6a8dbe3ddc702 https://github.com/facebook/react-native/commit/bfeaa6a4f531cfc18c097bc9ffb6a8dbe3ddc702
The only solution that solved my problem was to log all the fonts to find out correct naming解决我的问题的唯一解决方案是记录所有字体以找出正确的命名
(make sure you do the steps below only after adding the assets/fonts and running the react-native link
): (确保仅在添加资产/字体并运行
react-native link
后才执行以下步骤):
Anyway, to log them, open the appName.xcworkspace
file with xcode and then edit AppDelegate.m putting this lines at the end of the didFinishLaunchingWithOptions
method (and before the return statement):无论如何,要记录它们,请使用 xcode 打开
appName.xcworkspace
文件,然后编辑 AppDelegate.m 将此行放在didFinishLaunchingWithOptions
方法的末尾(以及 return 语句之前):
for (NSString* family in [UIFont familyNames])
{
NSLog(@"%@", family);
for (NSString* name in [UIFont fontNamesForFamilyName: family])
{
NSLog(@" %@", name);
}
}
So, when you run the app (from xcode) it outputs something like this:因此,当您运行应用程序(来自 xcode)时,它会输出如下内容:
This way, I can use the fontFamily Barow-Light or Zapfino inside my react-native styles这样,我可以在 react-native 样式中使用 fontFamily Barow-Light或Zapfino
Hope it helped!希望有帮助!
I had an incredibly hard time with this, even after following all advice I found.即使遵循了我找到的所有建议,我也为此感到非常困难。
What worked for me: ensure the font file is named using only lowercase letters and underscores.对我有用的方法:确保仅使用小写字母和下划线命名字体文件。 Re-link.
重新链接。 Done.
完毕。
A lot of hair pulling has been done over this yet it isn't mentioned anywhere as far as I can see.已经为此进行了大量的头发拉扯,但据我所知,在任何地方都没有提及。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.