Android react-native应用程序没有拾取字体

Question

我正在尝试在我的 react-native 应用程序中使用“Verveine Corp Regular”字体。

该字体适用于 iOS 版本，但不适用于 Android 版本。

字体为 .tff 格式，位于我工作的根目录（链接在 package.json 中，我已运行 react-native 链接）和“android/gradle/src/main/assets/fonts”内但它仍然没有拿起字体。我还多次清理和重建了应用程序。

当在 android 调试器中检查一个使用该字体的元素时，它说它正在使用该字体。但字体仍然是默认字体。

有人可以就这个问题提供一些帮助或指导吗？

谢谢！

Answer 1

First, make sure you are up to version 0.16+ with react-native.
Your fonts should be *.ttf or *.otf files and must be located in: /projectname/android/app/src/main/assets/fonts
Make sure the fonts are lowercase only and follow this pattern: fontname.ttf, fontname_bold.ttf, fontname_light.ttf, fontname_bold_italic.ttf

Answer 2

您是否在 AppTheme (styles.xml) 中定义了另一种覆盖您首选字体的字体？

您是否使用“Hello World”-App 作为最小测试来测试您的字体？

您是否实现了此处所示的 ttf？：How to use custom font in Android Studio

Answer 3

我从这里在 react-native android 中添加了字体：

https://medium.com/@gattermeier/custom-fonts-in-react-native-for-android-b8a331a7d2a7#.40vw3ooar

按照所有步骤操作即可。

添加后运行react-native run-android

Answer 4

这就是我在项目中使用自定义字体的方式

//sampleStyle.js
import overrideStyles from '/sampleoverridestyles';
iconTextStyle: {
  color: '#FFFFFF',
  fontSize: 16
}

//sampleoverridestyles.ios.js
export default {
  iconTextStyle: {
    fontFamily: 'FaktSoftPro-Medium'
  }
}

//sampleoverridestyles.android.js
export default {
  iconTextStyle: {
    fontFamily: 'faktsoftpro_medium'
  }
}

因为我无法为 iOS 和 android 设置相同的字体名称，所以我已经像上面那样覆盖了它并且它起作用了。

Answer 5

其他答案帮助我完成了这项工作，谢谢。仅当字体在文件名中包含大写字母时，才可能需要此操作。更完整的答案：

在 react native 中正常添加字体，例如：

{react-native-project}/fonts/GovtAgentBB.ttf

运行 react-native 链接，这会将字体放入

{react-native-project}/android/app/src/main/assets/fonts/GovtAgentBB.ttf

{react-native-project}/android/app/src/main/assets/fonts/GovtAgentBB_ital.ttf

但是android，带来机器人而不是人类，不喜欢这样。因此，在变体之前使用所有小写字母和下划线重命名文件，例如：

{react-native-project}/android/app/src/main/assets/fonts/govtagentbb.ttf

{react-native-project}/android/app/src/main/assets/fonts/govtagentbb_ital.ttf

然后，您必须根据平台更改样式中的字体名称。对于 iOS，使用人名，即显示在 Mac 字体菜单窗口标题中的字体名称（或只是您在网络上看到的名称）。对于 android，您必须自动使用刚刚重命名的文件的名称。

      {Platform.OS === 'ios' ? (
        <Text style={styles.welcome}>
          Hello World!
        </Text>
      ) : (
        <Text style={styles.welcomeAndroid}>
          Hello World
        </Text>
      )}
      const styles = StyleSheet.create({
      ...
      welcome: {
          fontFamily: 'Government Agent BB',
      },
      welcomeAndroid: {
          fontFamily: 'govtagentbb',
      },

Answer 6

如果您遵循所有其他解决方案但仍然没有更新，请尝试按照步骤操作

1. 添加 react-native-config.js 文件
2. 然后在 assets/fonts/your font 中添加字体
3. 将 OpenSans_Regular 等小写字母重命名为 opensans_regular
4. 项目文件夹中终端中的 react-native 链接
5. 毕竟使用 react-native run-android 再次构建您的项目
6. fontFamily: Platform.OS === "ios" ? 'opensans_regular' : 'cassandrapersonaluserregular_3bjg'，

我也遇到了同样的问题，字体没有反映更改，然后我再次构建我的项目，这是我的错误，因为我们在我们的 android 文件夹中添加了字体，所以我们需要再次编译它。 我希望有人可以节省他们的时间