javascript - React Native 中的 Google 字体

Question

我想知道是否可以在我的 React Native 项目中使用 Google 字体。

我一直在寻找一些信息，但我什么也没找到。

可能吗？

谢谢。

P.D.:我知道我可以下载它并将其包含到我的项目中。

Answer 1

如果你的 React Native 项目是用 Expo CLI 引导的，您现在可以使用 expo-google-fonts 将 Google 字体合并到项目中。包裹。
安装软件包:

expo install @expo-google-fonts/dev expo-font

备注 : dev将允许您从任何 Expo Google Fonts packages 导入任何字体样式.这将在运行时通过网络加载字体，而不是将 Assets 作为文件添加到项目中(如果您不知道要使用什么字体则很好):

import {
  useFonts,
  Roboto_400Regular,
  Bangers_400Regular,
  OpenSans_400Regular
} from "@expo-google-fonts/dev";

另一方面，如果您已经知道要使用的字体，请运行:

expo install @expo-google-fonts/FONT_FAMILY_NAME expo-font

例如，如果您选择使用 Roboto我们将安装:

expo install @expo-google-fonts/roboto expo-font

为避免在加载字体之前呈现文本，请安装 expo-app-loading使用 <AppLoading /> 的包零件:

expo install expo-app-loading

然后在您的项目文件中使用如下字体:

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { AppLoading } from "expo-app-loading";
import {
  useFonts,
  Roboto_400Regular,
  Roboto_400Regular_Italic
} from "@expo-google-fonts/roboto";

export default function App() {
  let [fontsLoaded] = useFonts({
    Roboto_400Regular,
    Roboto_400Regular_Italic
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  } else {
    return (
      <View style={{flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text style={{ fontFamily: "Roboto_400Regular", fontSize: 28 }}>
          Nice! Support for Google Fonts!
        </Text>
      </View>
    );
  }
}