React Native中的字体系列Roboto Light和Bold

Question

我正在对我的React Native应用程序中的文字进行一些更改：我需要指定Roboto轻字体用于段落，Roboto粗体用于标题。 我需要在iOS和Android应用程序中看到相同的文本外观，因此我需要使它适用于两者。 我尝试了这行代码：

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

但是我遇到了这个错误：

我尝试了官方文档中的这种方法，它可以正常工作。

title   : {
       fontFamily: 'Cochin'
   },

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

- user3521011

Answer 1

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

"rnpm": { "assets": [ "./fonts" // 您的字体目录 ] }

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

- Roman Akash

---

react-native link - stkvtflw

在新版本的React Native中，rnpm已被弃用。 - Maddy Blacklisted

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' }
  })
}

- RRikesh

---

谢谢...所以，没有办法在iOS和Android上同时使用它（因为我需要两个应用程序看起来完全相同）..我在某个地方读到可以手动添加.ttf文件，然后将其添加到package.json中，然后运行react native link https://hiddentao.com/archives/2017/03/10/get-custom-fonts-working-in-react-native/ ..那么这可能是一个解决方案吗？ - user3521011

是的，如果您想使用相同的字体，您可以添加它，否则请保持默认字体。 - RRikesh

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 构建失败，请打开 Xcode 工作区设置并将构建系统更改为 Legacy Build System。

- Tanver Hasan

Answer 4

为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字体族：

1. Download Roboto font from Google Fonts
2. Add it to your assets folder ./assets/fonts/Roboto

3. Add assets folder to your package.json:

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

4. Run: react-native link (it links ttf files on iOS and copy them on Android)

5. Remove Roboto files added in android/app/src/main/assets/fonts
6. Rebuild your app and .

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

- Erick M. Sprengel

---

非常感谢您提供的详细步骤说明。 - Wasim Abuzaher

Answer 5

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

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

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

- Benoit

Answer 6

对于react-native +v0.69，npx react-native link会产生错误。如果您正在使用此版本的react-native，则解决方案是：

1. npm i react-native-asset或yarn add react-native-asset

2. 在项目的根文件夹中创建一个react-native.config.js文件。

3. 将以下内容添加到文件中

   module.exports = { project: { ios: {}, android: {}, }, assets: ['./assets/fonts/'], };

4. 在项目的根目录下创建一个assets/fonts文件夹。

5. 然后在终端中运行npx react-native-asset。

这应该可以解决您的问题。

NB：从rn-v0.69开始，react-native link已停用，并替换为autolinking，但此功能无法将自定义字体添加到您的项目中，因此react-native-asset提供与react-native link相同的修复程序。

- Bismark Amanor