反应本机自定义字体

Question

这个问题已经在这里和这里出现，但那里的答案并不令人满意。字体在安卓上不起作用，但在iOS上可以。也许我在链接过程中犯了一些错误。

我是如何添加字体的：

1. 在根文件夹内创建文件夹assets/fonts/。

2. 添加

   "rnpm": { "assets": ["./assets/fonts"] }
   

3. react-native link

4. 控制台输出是它成功将资产添加到iOS和Android的

5. 添加了fontFamily："MyCustomFontFamily"到样式中。

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

7. 在安卓上运行，没有字体。

8. 检查了安卓项目目录，资产文件夹存在

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

10. 尝试了与 9 相同的变体，没有路径或扩展名，但没有运气

11. 看这里用体重，试过了，没有运气。

Answer 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 }} />

这确实使事情变得不那么容易出错，对我来说更容易维护。