字体家族 Roboto 轻盈而大胆地反应原生

Question

我正在对我的 React Native 应用程序中的文本进行一些更改：我需要为段落指定 Roboto light，为标题指定 Roboto Bold。我需要在 iOS 和 Android 应用程序中使用相同的文本外观：所以我需要让它对两者都适用我试过这行代码

text    : {
       fontFamily: 'sans-serif-light'
   },

但我收到此错误：

我从官方文档中尝试了这种类型，它工作正常

title   : {
       fontFamily: 'Cochin'
   },

--> 所以我认为问题出在 Roboto 字体家族本身。有帮助吗？

Answer 1

sans-serif-light 和 Roboto 是仅 Android 的字体。 iOS 需要不同的字体。这个存储库有一个可用的字体列表 iOS 和 Android - https://github.com/react-native-training/react-native-fonts

您可以使用 Platform.select() 为每个 OS 设置不同的字体：

title: {
  ...Platform.select({
       ios: { fontFamily: 'Arial', }, 
       android: { fontFamily: 'Roboto' }
  })
}

Answer 2

要将自定义字体添加到您的应用程序，请将所有 ttf 文件存储在一个目录中。将以下代码添加到您的 package.json 文件中。

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

然后运行react-native link 要使用字体，请在 fontFamily 中的 ttf 文件中使用相同的名称。

Answer 3

如果可以的话，我遇到了类似的问题。使用 "react-native link" 确实引用了 "Build Phases > Copy Bundle Resource" 中的字体，但它没有向 Info.plist 文件添加任何内容。

添加 Info.plist 中的字体解决了问题。

<key>UIAppFonts</key>
<array>
    <string>Roboto-Black.ttf</string>
</array>

Answer 4

为两者设置 Roboto Android/iOS:

用法

因为 Roboto 是 Android 的默认字体系列。我们可以将 Roboto 添加到 iOS 并只使用解决方案，省略 fontFamily for Android:

import {
  Platform,
  StyleSheet,
} from 'react-native'

const stylesByPlatform = Platform.select({
  ios: { fontFamily: 'Roboto' },
  android: { },
})

export default StyleSheet.create({
  text: {
    ...stylesByPlatform,
    color: '#000000',
  },
})

设置

对于iOS我们需要添加Roboto fontFamily:

从 Google Fonts
将其添加到您的资产文件夹中./assets/fonts/Roboto

:

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

运行：react-native link（它链接 iOS 上的 ttf 文件并在 Android 上复制它们）
删除 android/app/src/main/assets/fonts
重建您的应用程序和 .

真不知道为什么官方文档里没有这类内容。 :(

Answer 5

我最近遇到了同样的问题。事实证明 rnpm 命令已弃用，您可以使用 react native cli 配置添加自定义资产。 https://github.com/react-native-community/cli/blob/master/docs/configuration.md

要在项目中添加字体：

下载字体并将其放入 assets/fonts 文件夹

在项目根目录下创建文件为react-native.config.js 添加以下代码

module.exports={
    assets:[
        "./assets/fonts"
    ]
}

运行 react-native link

运行项目：npx react-native run-ios

注意：如果 IOS 的构建失败，请打开 xocde 工作区设置并将构建系统更改为 Legacy Build System。

字体家族 Roboto 轻盈而大胆地反应原生

Font family Roboto light and bold in react native

text

fonts

react-native

font-family

roboto

为两者设置 Roboto Android/iOS:

用法

设置