text - 字体系列 Roboto 轻而粗的反应原生

Question

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

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

但我收到此错误：

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

title   : {
       fontFamily: 'Cochin'
   },

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

Answer 1

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

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

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

Answer 2

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

您可以使用Platform.select()为每个操作系统定位不同的字体：

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

Answer 3

我最近有同样的问题。事实证明，该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。

Answer 4

为 Android/iOS 设置 Roboto：

用法

由于 Roboto 是 Android 的默认字体系列。我们可以将 Roboto 添加到 iOS 并使用RRikesh解决方案省略fontFamilyAndroid：

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：

1. 从Google 字体下载 Roboto字体
2. 将其添加到您的资产文件夹./assets/fonts/Roboto

3. 将 assets 文件夹添加到您的 package.json：

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

4. 运行：（react-native link它在 iOS 上链接 ttf 文件并在 Android 上复制它们）

5. 删除添加的 Roboto 文件android/app/src/main/assets/fonts
6. 重建您的应用程序和 .

我真的不知道为什么这种类型的内容不在官方文档中。:(

Answer 5

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

在Info.plist 中添加字体解决了这个问题。

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