这个问题已经是here和here,但是那里的答案并不令人满意。字体在android上不起作用,但在iOS上可以。也许我在链接过程中犯了一些错误。
我如何添加字体:
在根文件夹中创建了文件夹assets/fonts/
。
添加
"rnpm": { "assets": ["./assets/fonts"] }
react-native link
控制台输出是否成功将资产添加到iOS和Android
在样式中添加了fontFamily:'MyCustomFontFamily'。
在iOS上运行,一切正常。
在Android上运行,没有字体。
检查android项目目录和资产文件夹是否存在
我尝试添加
(Platform.OS === 'ios') ? 'MyCustomFontFamily' : 'fonts/my_custom_font_family'
与文件名一起使用,但此方法无法正常使用。尝试了与9相同的变体,没有路径或没有扩展但没有运气
阅读here以使用体重,尝试一下,没有运气。
最佳答案
我遇到了相同的问题,这与以下事实有关:众所周知,Android将从文件名读取,而iOS将从全名属性读取。而且的确,我混淆了字体的引用。
解决此问题的第一件事是仔细检查我的字体是否正确位于android/app/src/main/assets/fonts/
中。
然后我最终将字体重命名为与iOS使用的字体完全相同的名称,并使用该名称作为参考。这是我的意思:
export const sansSerifLight = 'Aileron-Light'; // Filename is 'Aileron-Light.otf'
export const sansSerifRegular = 'Aileron-Regular'; // Filename is 'Aileron-Regular.otf'
export const sansSerifBold = 'Aileron-Bold'; // Filename is 'Aileron-Bold.otf'
export const serifRegular = 'LibreBaskerville-Regular'; // Filename is 'LibreBaskerville-Regular.ttf'
export const serifBold = 'LibreBaskerville-Bold'; // Filename is 'LibreBaskerville-Bold.ttf'
export const serifItalic = 'LibreBaskerville-Italic'; // Filename is 'LibreBaskerville-Italic.ttf'
export const sansSerifTitle = 'ADAM.CG PRO'; // Filename is 'ADAM.CG PRO.otf'
export const serifTitle = 'Oranienbaum'; // Filename is 'Oranienbaum.ttf
接着 :
<MyComponent style={{ fontFamily: serifTitle }} />
这确实使事情变得不那么容易出错并且更容易维护。