react-native - console.error : "fontFamily "Roboto_medium"is not a system font and has not been loaded through Font. loadAsync

Question

当使用 import Native Base 时，我遇到了问题，因为屏幕上显示了一个字体错误。如果您单击关闭，它将消失，但用户无法在每次加载文本时看到它。 ¿ 有没有解决字体问题的正确方法？

这个official文档说这样做:

// At the top of your file
import { Font } from 'expo';
import { Ionicons } from '@expo/vector-icons';

// Later on in your component
async componentDidMount() {
  await Font.loadAsync({
    'Roboto': require('native-base/Fonts/Roboto.ttf'),
    'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
    ...Ionicons.font,
  });
}

但它没有用。这是我的代码:

import React, { Component } from 'react';
import { View, } from "react-native";
import { Button, Text } from 'native-base';

export default class MyComponent extends Component {

  render() {

        return (
                 <View>
                     <Button>
                       <Text>Click me!</Text>
                     </Button>
                  </View>
                )
   }
}

我希望代码能够顺利运行，但每次加载相同的错误时:

console.error: "fontFamily "Roboto_medium" is not a system font and has not been loaded through Font.loadAsync.

- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

- If this is a custom font, be sure to load it with Font.loadAsync."
__expoConsoleLog
    AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:95014:31
...................
...................
...................

Answer 1

Native Base 使用 Roboto_Medium 作为标题和一些对象的字体。 Roboto_Medium 不是系统字体。
你可以做两件事

安装和加载 Roboto_Medium 代码库中的字体。

编辑现有 原生基地 核心文件

1) 在您的代码库中安装并加载 Roboto_Medium 字体
安装 Native Base 后，在终端 expo install expo-font 中运行这些.
之后打开你的应用.js 文件，添加这两行，import * as Font from 'expo-font';import { Ionicons } from '@expo/vector-icons';之后包含函数 组件DidMount()

async componentDidMount() {
  await Font.loadAsync({
     Roboto: require('native-base/Fonts/Roboto.ttf'),
     Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
     ...Ionicons.font,
  });
  this.setState({ isReady: true });
}

您必须调用 组件DidMount() 功能。如果您使用的是类组件，那么可以使用构造函数方法调用它

constructor(){
   componentDidMount();
}

但是，如果您使用的是函数式方法，那么您必须手动调用 组件DidMount() 功能。
2) 编辑现有的 Native Base 核心文件 (选择)
您必须编辑核心 原生基地 文件。
文件位置:

commonColor.js
node_modules\native-base\dist\src\theme\variables\ commonColor.js

Material .js
node_modules\native-base\dist\src\theme\variables\ Material .js

平台.js
node_modules\native-base\dist\src\theme\variables\平台.js
在此文件中，找到 "Roboto_Medium"并将其替换为 《机器人》或任何其他系统默认字体。

但是，由于我们对 node_modules 进行了硬编码，因此每次更新 Native Base 时，您都必须再次对值进行硬编码。