ios - 是否可以在 React Native 中使用 iOS 13 系统字体？

Question

我想在我的 React Native 应用程序中使用自 iOS 13 以来可用的新系统字体。特别是，我需要圆角、衬线 和等宽 字体。在 native 端，它是使用 UIFontDescriptor.SystemDesign https://developer.apple.com/videos/play/wwdc2019/227/?time=142 完成的

在 React Native 方面，我们可以将 { fontFamily: 'System' } 与 StyleSheet 一起使用，但它仅提供默认的无衬线设计。

是否可以使用一些 Swift 代码来修改 Text 组件的字体描述符？或者我应该在 React Native 存储库中提交一个问题并提出功能请求？

Answer 1

React Native 不会在 iOS 上使用具有指定设计的 UIFontDescriptor，但您可以使用下一个运行时黑客技术 - “Method Swizzling”来拦截对 UIFont 的系统调用并返回一个需要的，但它应该在 ObjC 中实现。

只需将此 ObjC 代码添加到您的 XCode 项目中:

// UIFont+SystemDesign.m

#import <objc/runtime.h>

@implementation UIFont (SystemDesign)

+ (void)load {
  static dispatch_once_t onceToken;
  dispatch_once(&onceToken, ^{
    Class class = object_getClass((id)self);
    
    SEL originalSelector = @selector(fontWithName:size:);
    Method originalMethod = class_getClassMethod(class, originalSelector);
    
    SEL swizzledSelector = @selector(_fontWithName:size:);
    Method swizzledMethod = class_getClassMethod(class, swizzledSelector);
    
    BOOL didAddMethod = class_addMethod(class, originalSelector, method_getImplementation(swizzledMethod), method_getTypeEncoding(swizzledMethod));
    if (didAddMethod) {
      class_replaceMethod(class, swizzledSelector, method_getImplementation(originalMethod), method_getTypeEncoding(originalMethod));
    }
    else {
      method_exchangeImplementations(originalMethod, swizzledMethod);
    }
  });
}

#pragma mark - Method Swizzling

+ (UIFont *)_fontWithName:(NSString *)fontName size:(CGFloat)fontSize {
  NSString* const systemRounded = @"System-Rounded";
  NSString* const systemSerif = @"System-Serif";
  NSString* const systemMonospaced = @"System-Monospaced";
  
  NSArray* fonts = @[systemRounded, systemSerif, systemMonospaced];
  
  if ([fonts containsObject:fontName]) {
    if (@available(iOS 13.0, *)) {
      NSDictionary* designs = @{systemRounded : UIFontDescriptorSystemDesignRounded,
                              systemSerif : UIFontDescriptorSystemDesignSerif,
                              systemMonospaced : UIFontDescriptorSystemDesignMonospaced};
      
      UIFontDescriptor *fontDescriptor = [UIFont systemFontOfSize:fontSize].fontDescriptor;
      fontDescriptor = [fontDescriptor fontDescriptorWithDesign: designs[fontName]];
      return [UIFont fontWithDescriptor:fontDescriptor size:fontSize];
    }
    else {
      return [UIFont systemFontOfSize:fontSize];
    }
  }
  
  return [self _fontWithName:fontName size:fontSize];
}

@end

然后您可以在 React Native 文件中使用“System-Rounded”、“System-Serif”和“System-Monospaced”字体:

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.systemDefault}>Default</Text>
      <Text style={styles.systemRounded}>Rounded</Text>
      <Text style={styles.systemSerif}>Serif</Text>
      <Text style={styles.systemMonospaced}>Monospaced</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  systemDefault: {
    fontFamily: 'System',
    fontSize: 20,
  },
  systemRounded: {
    fontFamily: 'System-Rounded',
    fontSize: 20,
  },
  systemSerif: {
    fontFamily: 'System-Serif',
    fontSize: 20,
  },
  systemMonospaced: {
    fontFamily: 'System-Monospaced',
    fontSize: 20,
  },
});