如何在React Native中处理自定义字体和fontWeight

Question

如何在React Native中处理自定义字体和fontWeight

7

我按照官方文档的指引成功在我的React Native Expo应用程序中加载了自定义字体：

const App = () => {
  let [fontsLoaded] = useFonts({
    'Lato-Regular': require('../assets/fonts/Lato-Regular.ttf'),
    'Lato-Bold': require('../assets/fonts/Lato-Bold.ttf'),
    'Poppins-Light': require('../assets/fonts/Poppins-Light.ttf'),
    'Poppins-Bold': require('../assets/fonts/Poppins-Bold.ttf'),
  });

所以我可以使用组件样式：

<Text style={{
  fontFamily: 'Lato-Bold'
}}>Home page.</Text>

但我想像这样使用它：

<Text style={{
  fontFamily: 'Lato',
  fontWeight: 'bold',
}}>Home page.</Text>

这适用于系统字体，但不适用于自定义字体。

我该如何处理？

- Soullivaneuh

这个回答解决了你的问题吗？如何在React Native中设置默认字体族？ - OriHero

不完全是，因为它没有正确解释如何处理fontWeight。 - Soullivaneuh

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- OriHero · Accepted Answer

您需要使用自定义组件并从中提取字体粗细。它的样子是这样的。

import React from 'react';
import { View, Text as RnText, StyleSheet } from 'react-native';

const Text = ({ style, children, ...rest }) => {
  let baseStyle = styles.medium;

  // Multiple styles may be provided.
  (Array.isArray(style) ? style : [style]).forEach((style) => {
    if (style && style.fontWeight) {
      baseStyle = style.fontWeight === 'bold' ? styles.bold : styles.medium;
    }
  });

  // We need to force fontWeight to match the right font family.
  return <RnText style={[baseStyle, style, { fontWeight: 'normal' }]} {...rest}>{children}</RnText>;
};

const styles = StyleSheet.create({
  bold: {
    fontFamily: 'Lato-Bold',
  },
  light: {
    fontFamily: 'Lato-Light',
  },
  medium: {
    fontFamily: 'Lato-Black',
  },
});

export default Text;