React native 如何在React Native中添加自定义字体？

我在ios上运行这个。我遵循这些步骤，使“蒙特塞拉特半黑体”字体正常工作。我试着用“Source Sans Pro”做同样的事情，但是我得到了错误“Unrecogned font family”

我花了几个小时试了很多在网上找到的东西，但都没用

这是我的回购=>

---

p、 我使用的是VSCode

我使用expo字体来使用自定义字体，这很简单

在本机项目上使用自定义字体和expo字体的步骤

和配置iOS/Android上的unimodules

安装expo字体

npm i expo字体

在App.js上设置自定义字体

import“反应本机手势处理程序”；
从“React”导入React；
从“react native”导入{Text}；
从“expo字体”导入*作为字体；
类应用程序扩展了React.Component{
状态={
appIsReady:false，
};
异步组件didmount（）{
这是prepareResources（）；
}
prepareResources=async（）=>{
等待缓存资产（）；
this.setState（{appIsReady:true}）；
};
render（）{
如果（！this.state.appIsReady）{
返回装载。。。；
}
返回应用程序；
}
}
异步函数cacheAssets（）{
const fontAssets=cacheFonts([
{thin:require（“./assets/fonts/thin.ttf”）}，
{medium:require（“./assets/fonts/medium.ttf”）}，
{bold:require（“./assets/font/bold.ttf”）}，
]);
等待承诺。所有（[…fontAssets]）；
}
函数缓存字体（字体）{
返回font.map（（font）=>font.loadAsync（font））；
}
导出默认应用程序；

使用它

App

---

如果有人使用react native unimodules并希望配置自定义字体，这可能会很有帮助。

我使用expo字体来使用自定义字体，这很简单

在本机项目上使用自定义字体和expo字体的步骤

和配置iOS/Android上的unimodules

安装expo字体

npm i expo字体

在App.js上设置自定义字体

import“反应本机手势处理程序”；
从“React”导入React；
从“react native”导入{Text}；
从“expo字体”导入*作为字体；
类应用程序扩展了React.Component{
状态={
appIsReady:false，
};
异步组件didmount（）{
这是prepareResources（）；
}
prepareResources=async（）=>{
等待缓存资产（）；
this.setState（{appIsReady:true}）；
};
render（）{
如果（！this.state.appIsReady）{
返回装载。。。；
}
返回应用程序；
}
}
异步函数cacheAssets（）{
const fontAssets=cacheFonts([
{thin:require（“./assets/fonts/thin.ttf”）}，
{medium:require（“./assets/fonts/medium.ttf”）}，
{bold:require（“./assets/font/bold.ttf”）}，
]);
等待承诺。所有（[…fontAssets]）；
}
函数缓存字体（字体）{
返回font.map（（font）=>font.loadAsync（font））；
}
导出默认应用程序；

使用它

App

如果有人使用react native unimodules并希望配置自定义字体，这可能会有所帮助。

• 如果您能够正确地为蒙特塞拉特黑体字安装字体，我想您的字体安装正确，因此我将跳过此步骤，让我们转到“无法识别的字体系列”问题

• 您需要检查系统中的字体名称，而不是文件名，您需要在

  启动板中打开并检查您感兴趣的字体
  
  

• 例如，文件名

  IMFellEnglishSC Regular.ttf

  ，但在系统中，它可以是带有下划线的

  IM\u FELL\u English\u SC

  ）

• 所以，即使文件名不同，您也需要像使用

  fontFamily:IM\u FELL\u English\u SC

  一样使用它

• 在您的情况下，似乎

  fontFamily:SourceSansPro Regular

  应该适合您检查此项

• 将来，您可以使用这个很酷的软件包轻松链接和取消链接字体，对于添加自定义字体这样的事情来说，它非常酷而且简单->

• 干杯
  • 如果您能够正确地为蒙特塞拉特黑体字安装字体，我想您的字体安装正确，因此我将跳过此步骤，让我们转到“无法识别的字体系列”问题

  • 您需要检查系统中的字体名称，而不是文件名，您需要在

    启动板中打开并检查您感兴趣的字体
    
    

  • 例如，文件名

    IMFellEnglishSC Regular.ttf

    ，但在系统中，它可以是带有下划线的

    IM\u FELL\u English\u SC

    ）

  • 所以，即使文件名不同，您也需要像使用

    fontFamily:IM\u FELL\u English\u SC

    一样使用它

  • 在您的情况下，似乎

    fontFamily:SourceSansPro Regular

    应该适合您检查此项

  • 将来，您可以使用这个很酷的软件包轻松链接和取消链接字体，对于添加自定义字体这样的事情来说，它非常酷而且简单->

  ---

  • 干杯1-下载您想要的所有字体（确保其以.ttf结尾，例如：Arial狭窄.ttf）
    2-将其重命名为尽可能简单的名称，例如：从piazzolla reagular=s8.ttf到piazzolla reagular.ttf
    3-在项目上创建“资产””文件夹（您可能已经创建了一个）
    4-在您的资产文件夹中创建一个名为“fonts”的文件夹，并将所有下载（并重命名）的字体粘贴到其中
    5-在项目中创建一个名为“react native.config.js”的文件，并用以下代码填充该文件：

    module.exports = {
      project: {
        ios: {},
        android: {}, // grouped into "project"
      },
      assets: ["./assets/fonts/"], // stays the same
    };
    

    6-在控制台上（在项目目录中）写下：
    这将链接您的项目
    现在，将您的字体应用于<Text style={{ fontFamily: "medium" }}>App</Text>

    module.exports = {
      project: {
        ios: {},
        android: {}, // grouped into "project"
      },
      assets: ["./assets/fonts/"], // stays the same
    };
    

    npx react-native link
    

    style={{color:'#999',fontFamily:'exo2-regular'}}