React Native 中的 Google 字体

Question

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

我一直在寻找一些信息，但没有找到任何信息。

有可能吗？

谢谢。

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

Answer 1

从这里下载谷歌字体：Github Google Fonts

假设你的字体是流沙，你可以在 index.ios.js 中做这样的事情：

import _ from 'lodash';

var OldText = Text;

class NewText extends OldText {
  defaultProps = {
    customFont: false
  }

  render() {
    var props = _.clone(this.props);

    if (this.props.customFont) {
      return super.render();
    }

    if (_.isArray(this.props.style)){
      props.style.push({fontFamily: 'Quicksand-Regular', fontSize: 12});
    } else if (props.style) {
      props.style = [props.style, {fontFamily: 'Quicksand-Regular', fontSize: 12}];
    } else {
      props.style = {fontFamily: 'Quicksand-Regular', fontSize: 12};
    }

    this.props = props;

    return super.render();
  }
}

Object.defineProperty(React, 'Text', {value: NewText});

然后在 xCode 中添加你的字体 => Build Phases => Copy Bundle Resources

然后检查您的项目 Info.plist 中有以下内容：

<key>UIAppFonts</key>
<array>
    <string>Quicksand-Bold.otf</string>
    <string>Quicksand-BoldItalic.otf</string>
    <string>Quicksand-Italic.otf</string>
    <string>Quicksand-Light.otf</string>
    <string>Quicksand-LightItalic.otf</string>
    <string>Quicksand-Regular.otf</string>
    <string>Quicksand_Dash.otf</string>
</array>

这对我有用。

Answer 2

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

安装包：

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

注意：dev 将允许您从任何Expo Google Fonts packages 导入任何字体样式。这将在运行时通过网络加载字体，而不是将资产作为文件添加到项目中（如果您不知道要使用什么字体，这很好）：

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