been本机/世博/ NativeBase - fontFamily "Roboto_medium“不是系统字体，也没有通过Font.loadAsync加载

Question

我正在创建一个移动应用程序使用博览，并希望使用NativeBase的UI组件。

不管我想做什么，我都会遇到这个恼人的错误：fontFamily "Roboto_medium" is not a system font and has not been loaded through Font.loadAsync

我看了一下文档，并从那里使用了这个例子，它起作用了！

import React from 'react';
import { AppLoading } from 'expo';
import { Container, Text } from 'native-base';
import * as Font from 'expo-font';
import { Ionicons } from '@expo/vector-icons';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isReady: false,
    };
  }

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

  render() {
    if (!this.state.isReady) {
      return <AppLoading />;
    }

    return (
      <Container>
        <Text>Open up App.js to start working on your app!</Text>
      </Container>
    );
  }
}

请注意它们如何在componentDidMount()中加载字体

现在，你可以看到，这是旧的反应，我想使用钩子和函数组件。

我试过这个：

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

我试过了：

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

对我来说什么都不管用！有人能帮忙吗？我怎样才能加载这些字体？

Answer 1

首先，我们必须安装我们想要使用的世博google字体，例如：

expo install expo-font @expo-google-fonts/inter expo-app-loading

下一步，我们为本机基础提供程序创建一个主题文件theme.js，请参阅参考资料：https://docs.nativebase.io/next/customizing-fonts。

import { extendTheme } from "native-base";

export const theme = extendTheme({
  fontConfig: {
    Inter: {
      400: {
        normal: "Inter_400Regular",
      },
      500: {
        normal: "Inter_500Medium",
      },
      600: {
        normal: "Inter_600SemiBold",
      },
    },
  },
  fonts: {
    heading: "Inter",
    body: "Inter",
    mono: "Inter",
  },
});

最后，我们链接主题文件并将字体加载到App，参见参考：https://docs.expo.dev/guides/using-custom-fonts/

import {
  useFonts,
  Inter_400Regular,
  Inter_500Medium,
  Inter_600SemiBold
} from "@expo-google-fonts/inter";
import AppLoading from 'expo-app-loading';
import { NativeBaseProvider, Box, Text } from "native-base";
import { theme } from "./theme";

export default function App() {
  let [fontsLoaded] = useFonts({
    Inter_400Regular,
    Inter_500Medium,
    Inter_600SemiBold
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  }

  return (
    <NativeBaseProvider theme={theme}>
      <Box flex={1} bg="#fff" alignItems="center" justifyContent="center">
        <Text fontWeight="500">
          Expo Google Font with Native Base
        </Text>
      </Box>
    </NativeBaseProvider>
  );
}