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

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

当使用 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
...................
...................
...................

对于较新的功能组件这样解决

import { View } from 'react-native';
import { NativeBaseProvider, Text } from 'native-base';

const MyComponent = () => {
  return (
    <NativeBaseProvider>
      <View>
        <Text>Example Text</Text>
      </View>
    </NativeBaseProvider>
  )
}
export default MyComponent;

对于旧的功能组件这样解决

import { View } from 'react-native';
import { Text } from 'native-base';
import * as Font from 'expo-font';

const MyComponent = () => {

  useEffect(() => {
    (async () => await Font.loadAsync({
      Roboto: require('native-base/Fonts/Roboto.ttf'),
      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
    }))();
   }, [])

  return (
    <View>
      <Text>Example Text</Text>
    </View>
  )
}
export default MyComponent;

对于Class组件是这样解决的

import React, { Component } from 'react';
import { View, } from "react-native";
import { Button, Text } from 'native-base';
import { Font } from 'expo';
import { Ionicons } from '@expo/vector-icons';

export default class MyComponent extends Component {

  state = {
    loading: true
  }

  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({ loading: false })
  }

  render() {
       if (this.state.loading) {
         return (
           <View></View>
         );
       }
        return (
          <View>
            <Button>
              <Text>Click me!</Text>
            </Button>
          </View>
       )
   }
}

如果有人仍然遇到这个问题并且正在使用功能组件，我是这样解决的：

 import * as Font from 'expo-font';


useEffect(() => {
(async () => await Font.loadAsync({
  Roboto: require('native-base/Fonts/Roboto.ttf'),
  Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
}))();
 }, [])

Native Base 使用 Roboto_Medium 作为标题和一些 objects 的字体。 Roboto_Medium不是系统字体。

你可以做两件事

  1. 在您的代码库中安装并加载 Roboto_Medium 字体。
  2. 编辑现有的 Native Base 核心文件

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

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

您必须调用 componentDidMount() 函数。如果您正在使用 Class 组件，那么可以使用 constuctor 方法

调用它 
constructor(){
   componentDidMount();
}

但是，如果您使用的是函数式方法，那么您必须手动调用 componentDidMount() 函数。

2) 编辑现有的 Native Base 核心文件（备选）
您必须编辑核心 Native Base 文件。
文件位置：

  1. commonColor.js
    node_modules\native-base\dist\src\theme\variables\commonColor.js
  2. material.js
    node_modules\native-base\dist\src\theme\variables\material.js
  3. platform.js
    node_modules\native-base\dist\src\theme\variables\platform.js
    在此文件中，找到 "Roboto_Medium" 并将其替换为 "Roboto" 或任何其他系统默认字体。

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