leecade / react-native-practice

8 stars 0 forks source link

adding custom fonts #1

Closed leecade closed 8 years ago

leecade commented 8 years ago

customFont.ttf

package into project:

https://medium.com/@dabit3/adding-custom-fonts-to-react-native-b266b41bff7f#.pxrg4l2ta

then, usage:

{
    fontFamily: 'customFont'
}

put the font file into assets/fonts

then, usage:

{
    fontFamily: 'customFont'
}

And, the way to modif the Text.prototype.render to batch handle fontFamily

    Text.prototype.render = _.wrap(Text.prototype.render, function (func, ...args) {
        let originText = func.apply(this, args);
        return cloneElement(originText, {
            style: [
                originText.props.style,
                styles.defaultFontFamily
            ]
        });
    });
leecade commented 8 years ago

UPDATE

Now, we can use react-native link to link assets

Create an assets folder in your project root then define it in package.json:

"rnpm": {
  "assets": ["assets"]
},

Then run react-native link, both iOS / Android font will be handled as assets, use the name as fontFamily

ref:

https://facebook.github.io/react-native/releases/0.33/docs/linking-libraries-ios.html#automatic-linking

https://github.com/rnpm/rnpm#advanced-usage