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

Question

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

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

但我收到此错误：

我在官方文档中尝试过这种类型并且工作正常

title : { fontFamily: 'Cochin' },

- ＆GT;所以我认为问题出在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

要在项目中添加字体：

• 下载字体并将其放置在资产/字体文件夹中

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

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

运行react-native link

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

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

Answer 4

如果有帮助，我遇到了类似的问题。确实使用“ react-native链接”引用了“构建阶段>复制捆绑包资源”中的字体，但没有向Info.plist文件添加任何内容。

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

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

Answer 5

为两个Android / iOS设置Roboto：

用法

由于Roboto是Android的默认字体系列。我们可以将Roboto添加到iOS，而仅使用RRikesh解决方案，而忽略Android的fontFamily：

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. Add assets folder to your package.json：

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

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

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

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