我想知道是否可以在我的 React Native 项目中使用 Google 字体。
我一直在寻找一些信息,但我什么也没找到。
可能吗?
谢谢。
P.D.:我知道我可以下载它并将其包含到我的项目中。
请您参考如下方法:
如果你的 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>
);
}
}