我想知道是否可以在我的 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> 
    ); 
  } 
} 


评论关闭
IT干货网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!