Google fonts in React Native

问题

I was wondering if it'd be possible to use Google fonts in my React Native project.

I've been looking for some information but I didn't find anything.

Is it possible?

Thanks.

P.D.: I know I can download it and include it into my project.

回答1:

Download google fonts from here : Github Google Fonts

Suppose your font is Quicksand, you can do something like this in 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});

Then add you font in xCode in => Build Phases => Copy Bundle Resources

Then check you have the following in your projects 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>

This did the trick for me.

来源：https://stackoverflow.com/questions/33971221/google-fonts-in-react-native