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

Question

我在我的反应本机应用程序中对文本进行了一些更改:我需要为段落指定Roboto灯,为标题指定Roboto Bold.我需要在iOS和Android应用程序中具有相同的文本外观:所以我需要使它适用于我尝试此代码行代码

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

但我得到这个错误:

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

title : { fontFamily: 'Cochin' },

- >所以我认为问题出在Roboto fontfamily本身..任何帮助？

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解决方案，而fontFamily忽略 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：

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

3. 将 asset 文件夹添加到 package.json：

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

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

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

我真的不知道为什么官方文档中没有此类内容。:(