反应原生自定义字体

Question

这个问题已经是here和here，但答案并不令人满意。字体不适用于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使用重量，试了一下，没有运气。

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

这着实让事物的方式不容易出错，更容易维护我。