Is there is way to set a font globally in react native?

问题

Is there is a way to set a font globally in react native? what I need to do is a custom font that applies every Text component in the whole application. Your help is extremely appreciated, Thanks

回答1:

One way is to create a wrapper for RN Text say MyTextCustomFont:

const MyTextCustomFont = (props) => {
   return (
        <Text style={{fontFamily:'myFont'}} {...props} >{props.children}</Text>
   )
}

import this MyTextCustomFont and use anywhere.

Another way is to define a style object and use it wherever you want.

回答2:

I think your problem is add Custom Fonts in react native.

1. Add Your Custom Fonts to Assets

Add all the font files you want to an “assets/fonts” folder in the root of your react native project:

2. Edit Package.json

Adding rnpm to package.json providing the path to the font files:

"rnpm": {
    "assets": [
    "./assets/fonts/"
    ]
},

3. Link assest files

run this command in your react native project root folder

react-native link

This should add the font references in your Info.plist file for iOS and on Android copy the font files to android/app/src/main/assets/fonts.

4. Add in stylesheet

Add a fontFamily property with your font name:

const styles = StyleSheet.create({
      title: {
        fontSize: 16,
        fontFamily: 'PlayfairDisplay-Bold',
        color: '#fff',
        paddingRight: 20,
      },
    });

回答3:

So, I've made a component doing this quite easely some times ago. This is working with Expo, I don't know for vanilla react-native.

at the start of your app:

import { Font, Asset } from 'expo'

async initFont() {
    try {
      await Font.loadAsync({
        'Bariol': require('src/assets/font/Bariol_Regular.otf'),
        'Bariol Bold': require('src/assets/font/Bariol_Bold.otf'),
      })
      this.setState({ fontReady: true })
    } catch (e) {
      console.log(e)
    }
  }

Then, you have to create a component file like text.js containing this code:

export default function (props) {
  let font = { fontFamily: 'Bariol' }
  if (props.bold) {
    font = { fontFamily: 'Bariol Bold' }
  }

  const { bold, style, children, ...newProps } = props
  return (
    <Text {...newProps} style={[Style.text, props.style, font]}>
      {props.children}
    </Text>
  )
}

Finally, in any of you other component / page just import MyText:

import Text from 'path/to/text.js'

use it like a normal Text component:

<Text bold>Hello World!</Text>

Even if this solution looks a bit more complicated than the others, it is easier to use once the setup is ok, since you just have to import Text.

回答4:

To do this we have to implement a method in which we will override Text component creation in react native. In this we will set default font family or size or any attribute we want to set by default.

// typography.js

import React from 'react'
import { Text, Platform, StyleSheet } from 'react-native'

export const typography = () => {
  const oldTextRender = Text.render
  Text.render = function(...args) {
    const origin = oldTextRender.call(this, ...args)
    return React.cloneElement(origin, {
      style: [styles.defaultText, origin.props.style],
    })
  }
}

const styles = StyleSheet.create({
  defaultText: {
    fontFamily: 'NunitoSans-Regular',//Default font family
  }
});

Then in index.js you have to do this:-

import { typography } from './src/utils/typography'

typography()

Detailed Answer Here:- https://ospfolio.com/two-way-to-change-default-font-family-in-react-native/

回答5:

yes

app.js

import styles from './styles';
{...}
 <Text style={styles.text}>hello World </Text>
{...}

styles.js

import {StyleSheet} from 'react-native';

const styles = StyleSheet.create({
 text: {
    // define your font or size or whatever you want to style here
  },

use style on every text and all changes will affect all text components

来源：https://stackoverflow.com/questions/51023593/is-there-is-way-to-set-a-font-globally-in-react-native

标签

react-native

hybrid-mobile-app