console.error： "fontFamily "Roboto_medium" 不是系统字体，并且尚未通过 Font.loadAsync 加载

Question

使用导入本机库(因为它来了)时，由于屏幕中显示的字体错误，我遇到了麻烦。如果单击"关闭"，它将消失，但用户无法在每次加载文本时看到它。¿有没有解决字体问题的正确方法？

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

// 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作为 Title 和某些对象的字体。Roboto_Medium不是系统字体。

您可以执行以下两项操作之一

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

1) 在代码库中
安装并加载Roboto_Medium字体 安装 Native Base 后，在终端expo install expo-font中运行这些字体。
之后打开你的App.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 });
}

您必须调用componentDidMount()函数。如果您使用的是类组件，则可以使用constuctor方法调用它

constructor(){
componentDidMount();
}

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

2) 编辑现有的本机基本核心文件(替代)
您必须编辑核心本机基本文件。
文件位置：

1. commonColor.jsnode_modulesative-base\dist\src\theme\variables \commonColor.js
   
   
2. 材质.js
   node_modules\本机基础\dist\src\theme\variables\材质.js
   
3. 平台.js
   node_modulesative-base\dist\src\theme\variables\platform.js
   在此文件中，找到"Roboto_Medium">并将其替换为"Roboto">或任何其他系统默认字体。

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

Answer 2

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

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