如何在react-native中更改默认的fontFamily

Question

Can I set a default fontFamily in my app (iOS and Android)??

I don't want set it in each screen.

Any idea?

Answer 1

The only way to do this is from the native side of things. See here:

Set a default font for whole iOS app?

and

Is it possible to set a custom font for entire of application?

Although, if you use the library Cairn (disclaimer: I wrote it) it's trivial. Simply define your global text style and extend from it everywhere. Cairn makes all global stuff reusable while not breaking component-specific overrides and extensions.

// styles.js
import { createStylesheet } from 'react-native';
import cairn from 'cairn';

export default cairn({
    text: {
        fontFamily: '...'
    }
}, (styles) => createStylesheet(styles));

Then extend those global styles in your component and apply to your text element:

// components/MyComponent.js

import styleContext from '../styles';

const style = styleContext.extend({
    'text.header': {
        fontSize: 30
    }
});

export default const MyComponent = () => (
    // Spreads style={[styleContext.text, style['text.header']]}
    <Text {...style('text.header')}>Header!</Text>
);