console.error: "fontFamily "Roboto_medium" 不是系统字体，还没有通过 Font.loadAsync 加载

Question

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

这个官方文档说要这样做：

// 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

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

 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'),
}))();
 }, [])

Answer 2

Native Base 使用Roboto_Medium作为 Title 和一些对象的字体。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()函数。如果您使用的是类组件，则可以使用构造函数方法调用它

constructor(){
   componentDidMount();
}

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

2) 编辑现有的 Native Base 核心文件(Alternative)
您必须编辑核心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 的每次更新，您必须再次对这些值进行硬编码。

Answer 3

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

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;

对于类组件，它是这样解决的

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