Как мы можем установить группу шрифтов, используя реквизиты fontFamily в React Native?

Question

Как и в CSS, мы можем установить так:

font-family:"Times New Roman",Georgia,Serif;

Но в RN мы можем просто установить один шрифт,

fontFamily: 'MidPlane00v3.1',

Как мы можем использовать его как CSS? Мне нужно показать несколько байтов китайских слов, используя механизм отката шрифта!

Answer 1

Вы не можете настроить React-Native, как в CSS. Это связано с тем, что в CSS происходит то, что браузер попытается получить первый, а в случае, если он не сможет, он попробует следующую определенную альтернативу, как указано в W3 Schools .

В React-Native это не проблема, потому что вы добавите в папку собственных ресурсов приложения, гарантируяfont-familyприсутствие в приложении. Если вам нужны дополнительные объяснения, почему, вы можете взглянуть на документацию React Native .

И если вы хотите узнать, как добавить собственное семейство шрифтов в проект, вы можете следовать этому руководству.

Answer 2

В React вы можете установить несколько семейств шрифтов, используя следующий синтаксис:

fontFamily: '"Times New Roman", Georgia, Serif'

Пример:

const cardStyle = {
  fontFamily: '"Times New Roman", Georgia, Serif',
  fontSize: '6rem',
  fontWeight: 300,
  letterSpacing: '-0.01562em',
  lineHeight: 1
};

Answer 3

В React Native они более строгие: вы должны обернуть все текстовые узлы внутри компонента.

Проверьте этот официальный документ ваш ответ там: Официальный документ

// we define available font weight and styles for each font here
const font = {
  OpenSans: {
    weights: {
      ExtraBold: '800',
      Bold: '700',
      SemiBold: '600',
      Light: '300',
      Normal: '400'
    },
    styles: {
      Italic: 'italic'
    }
  },
  Verdana: ...,
  Tahoma: ...,
  ...
}

// generate styles for a font with given weight and style
export const fontMaker = (options = {}) => {
  let { weight, style, family } = Object.assign({
    weight: null,
    style: null,
    family: 'OpenSans'
  }, options)

  const { weights, styles } = font[family]

  if (Platform.OS === 'android') {
    weight = weights[weight] ? weight : ''
    style = styles[style] ? style : ''

    const suffix = weight + style

    return {
      fontFamily: family + (suffix.length ? `-${suffix}` : '')
    }
  } else {
    weight = weights[weight] || weights.Normal
    style = styles[style] || 'normal'

    return {
      fontFamily: family,
      fontWeight: weight,
      fontStyle: style
    }
  }
}

Refernce