反应原生自定义字体

时间:2017-08-03 10:53:09

标签: android reactjs react-native fonts

此问题已经herehere,但答案并不令人满意。字体不适用于Android,但在iOS上。也许我在链接过程中犯了一些错误。

我是如何添加字体的?

  1. 在根文件夹中创建文件夹assets/fonts/
  2. 已添加

    "rnpm": { "assets": ["./assets/fonts"] }
    
  3. react-native link

  4. 控制台输出是否成功将资源添加到iOS和Android

  5. 添加了fontFamily:' MyCustomFontFamily'进入风格。

  6. 在iOS上运行,一切正常。

  7. 在Android上运行,没有字体。

  8. 检查了android项目目录,资产文件夹存在

  9. 我尝试添加(Platform.OS === 'ios') ? 'MyCustomFontFamily' : 'fonts/my_custom_font_family'以使用文件名,但这不起作用。

  10. 尝试与没有路径或延伸但没有运气的9相同的变化

  11. 阅读here使用体重,尝试过,没有运气。

1 个答案:

答案 0 :(得分:1)

我遇到了同样的问题,这与你已经知道的事实有关, 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 }} />

这真的让事情变得不那么容易出错,而且对我来说更容易维护。