React Native中的Google字体

Question

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

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

可能吗？

谢谢。

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

Answer 1

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

安装软件包：

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

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

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

然后在您的项目文件中像这样使用它：

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { AppLoading } from "expo";
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>
    );
  }
}

Answer 2

从这里下载Google字体：Github Google字体

假设您的字体是流沙，您可以在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中添加字体

然后检查您的项目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>

这帮了我大忙。