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中的任何一个导入任何字体样式。这将在运行时通过网络加载字体，而不是将资产作为文件添加到项目中（如果您不知道使用哪种字体，则很好）：

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

从此处下载谷歌字体：Github Google Fonts

假设您的字体是Quicksand，您可以在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 in =＆gt;中添加字体Build Phases =＆gt;复制捆绑资源

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

这对我有用。

React Native中的Google字体

2 个答案: