How do you use custom fonts with React-native andr

2019-09-07 04:46发布

问题:

I'm having difficulty getting custom webfonts to work with react-native on android.

I have followed the instructions from here https://medium.com/@gattermeier/custom-fonts-in-react-native-for-android-b8a331a7d2a7#.w6aok6lpw but to no success.

I've tried with a few different fonts, still no joy.

nb I've tried renaming the font files, replaces dashes with underscores, all lowercase, and so on, but still no success.

Any help, greatly appreciated. This is my code:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-native';

class MyBeltingApp extends Component {
  render() {
    return (
      <View>
        <Text style={styles.welcome}>
         Straigtline
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  welcome: {
    fontFamily: 'GT-Walsheim-Bold',
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

AppRegistry.registerComponent('MyBeltingApp', () => MyBeltingApp);

回答1:

I've managed to get the fonts working.

Created a fonts folder in the root of my project.

then in package.json

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

then run rnpm link assets

huzzah...

nb. I didn't have to change any files names or anything. they work with dashes just fine.