了解如何在react原生中加载"font-family“

Question

我正在尝试理解react原生中的字体和字体系列。我在shoutem/ui库和exponentjs框架之间发现了一个bug，其中shoutem/ui将TextInput的样式设置为Rubik。然而，exponentjs项目单独加载每种Rubik字体，并需要引用特定的Rubik字体或粗细，例如Rubik-Regular。

https://github.com/shoutem/ui/blob/develop/theme.js

https://github.com/exponent/shoutem-example

我不明白的是:在默认的react-native字体实现中，是否存在默认的魔法，它理解所有这些Rubik字体都是字体家族的一部分，并将整个字体设置为Rubik并显示粗体、斜体等……当文本被设置为粗体时，是否需要？这是否意味着Exponent没有实现将所有这些字体聚合到一个命名字体家族组中的字体聚合功能？

或者..。

是否是shoutem库错误地引用了应用程序中不存在的字体？

指数应用程序如何加载shoutem库使用的所有字体：

 {'Rubik-Black': require('./node_modules/@shoutem/ui/fonts/Rubik-Black.ttf')},
  {'Rubik-BlackItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-BlackItalic.ttf')},
  {'Rubik-Bold': require('./node_modules/@shoutem/ui/fonts/Rubik-Bold.ttf')},
  {'Rubik-BoldItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-BoldItalic.ttf')},
  {'Rubik-Italic': require('./node_modules/@shoutem/ui/fonts/Rubik-Italic.ttf')},
  {'Rubik-Light': require('./node_modules/@shoutem/ui/fonts/Rubik-Light.ttf')},
  {'Rubik-LightItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-LightItalic.ttf')},
  {'Rubik-Medium': require('./node_modules/@shoutem/ui/fonts/Rubik-Medium.ttf')},
  {'Rubik-MediumItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-MediumItalic.ttf')},
  {'Rubik-Regular': require('./node_modules/@shoutem/ui/fonts/Rubik-Regular.ttf')},
  {'Rubik': require('./node_modules/@shoutem/ui/fonts/Rubik-Regular.ttf')},
  {'rubicon-icon-font': require('./node_modules/@shoutem/ui/fonts/rubicon-icon-font.ttf')},

  ...    using Exponent.Font.loadAsync(font)

Answer 1

似乎你在使用Shoutem UI时遇到了问题，因为你正在与Expo一起使用它，它对你可以使用的本机功能有限制。

这里有一个例子，告诉你需要做什么才能让它工作：https://github.com/shoutem/ui/tree/develop/examples/create-react-native-app