无法更改字体族（React-Native）

Question

我是一个新手，对react-native和CSS并不熟悉。我只是想把字体设置为Helvetica，但尝试了多次都没有改变。

这是我的CSS代码：

import {StyleSheet} from "react-native";

export default StyleSheet.create({

  header: {
    backgroundColor:'#004D4D',
    height: 35,
  },

  headerT: {
    color: '#FFFFFF',
    fontSize: 20,
    fontFamily: 'Helvetica',
    textAlign: 'center',
    justifyContent: 'center',
  },

  body: {
    backgroundColor:'#E6FFFF',
    flex:1,
  },

})

这是我想要修改的页面。

import React, { Component } from 'react';
import { Text, View, Button } from 'react-native';
import styles from "../style/css";

class HomeScreen extends Component{
  render(){
    return(
      <View style={styles.body}>


        <View style={styles.header}>
          <Text style={styles.headerT}>Home Screen</Text>
        </View>


      </View>

    );
  }
}

export default HomeScreen;

这是我的目录。

- Alex Pickup

---

那你怎么知道它不起作用了？你的设备上已经有这种字体了吗？ - Justinas

由于每次刷新时字体都没有更改，所以它不能正常工作。我已经尝试了多个不同的字体。 - Alex Pickup

Answer 1

React Native字体列表：https://github.com/react-native-training/react-native-fonts

如果您正在使用Android，Helvetica字体将无法直接使用，您需要使用自定义字体。

这里有一篇文章介绍如何在React Native中使用iOS和Android构建的自定义字体。

- ridvanaltun

Answer 2

首先，您需要通过下载所需的任何字体（例如您想要 Helvetica 字体）并将其添加到 assets 文件夹中。然后，您需要下载 Helvetica.ttf 文件。

接下来，在您的 package.json 文件中添加以下行：

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

然后我们告诉React Native为我们链接这些字体文件。

在Android上，如果您查看文件路径android/app/src/main/assets/fonts/，您应该会看到已经复制了您的字体文件。

在IOS上，它被添加在Info.plist文件中。

现在只需添加一个fontFamily属性和您的字体名称即可。

- Ronak07

Answer 3

如果您使用了fontWeight，尝试将其移除（可能会在Android上引起问题，请参见https://dev59.com/QFgQ5IYBdhLWcg3wRR5j#58765980）。

- A.T Rayan

---

虽然这个链接可能回答了问题，但最好在此处包含答案的必要部分，并提供参考链接。如果链接页面更改，仅链接的答案可能无效。- 来自审查 - Jebasuthan