Question

在使用导入Native Base时（即将出现），由于屏幕上显示了字体错误，我遇到了麻烦。如果单击关闭，它将消失，但每次加载文本时用户都看不到。 ¿是否有解决字体问题的正确方法？

此a new command 'switch'文档说要这样做：

// 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 字体。
编辑现有的Native Base核心文件

1) 在代码库中安装和加载 Roboto_Medium 字体
安装 Native Base 后，在终端 static string ZwrocNieparzyste1(int[] tab, int i = 0) { if (tab.Length == 1) if (tab[i] % 2 == 1) return string.Format("[{0}]", tab[i]); else return "[]"; if (tab.Length == 0) return "[]"; if (i == 0) if (tab[i] % 2 == 1) return string.Format("[{0},{1}", tab[i], ZwrocNieparzyste1(tab, i + 1)); else return string.Format("[{0}", ZwrocNieparzyste1(tab, i + 1)); if (i < tab.Length - 1) if (tab[i] % 2 == 1) return string.Format("{0},{1}", tab[i], ZwrocNieparzyste1(tab, i + 1)); else return string.Format("{0}", ZwrocNieparzyste1(tab, i + 1)); else if (tab[i] % 2 == 1) return string.Format("{0}]", tab[i]); else return "]"; } 中运行这些。
之后打开你的 App.js 文件，添加这两行，
expo install expo-font
import * as Font from 'expo-font';
之后包含函数 componentDidMount()

import { Ionicons } from '@expo/vector-icons';

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

调用它

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() 函数。

2) 编辑现有的 Native Base 核心文件（替代）
您必须编辑核心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
platform.js
node_modules\native-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 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>
                )
   }
}

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

3 个答案: