如何在 React Native 中为 <TabBarIOS> 使用自定义字体？

Question

我正在使用<TabBarIOS> 组件，我有自定义图标工作（使用react-native-vector-icons）但是我正在努力在<Icon.TabBarItemIOS> 组件上获得自定义fontFamily。我希望能够更改每个图标下方文本标签的字体。

我尝试将样式添加到标签栏和标签栏项目，但是它返回错误：

2016-06-09 17:45:52.449 [warn][tid:com.facebook.react.JavaScript] Warning: Failed propType: Invalid props.style key `fontFamily` supplied to `RCTTabBar`.
Bad object: {
  "flex": 1,
  "fontFamily": "Roboto-Regular"
}
Valid keys: [
  "width",
  "height",
  "top",
  "left",
  "right",
  "bottom",
  "margin",
  "marginVertical",
  "marginHorizontal",
  "marginTop",
  "marginBottom",
  "marginLeft",
  "marginRight",
  "padding",
  "paddingVertical",
  "paddingHorizontal",
  "paddingTop",
  "paddingBottom",
  "paddingLeft",
  "paddingRight",
  "borderWidth",
  "borderTopWidth",
  "borderRightWidth",
  "borderBottomWidth",
  "borderLeftWidth",
  "position",
  "flexDirection",
  "flexWrap",
  "justifyContent",
  "alignItems",
  "alignSelf",
  "flex",
  "shadowColor",
  "shadowOffset",
  "shadowOpacity",
  "shadowRadius",
  "transform",
  "transformMatrix",
  "decomposedMatrix",
  "scaleX",
  "scaleY",
  "rotation",
  "translateX",
  "translateY",
  "backfaceVisibility",
  "backgroundColor",
  "borderColor",
  "borderTopColor",
  "borderRightColor",
  "borderBottomColor",
  "borderLeftColor",
  "borderRadius",
  "borderTopLeftRadius",
  "borderTopRightRadius",
  "borderBottomLeftRadius",
  "borderBottomRightRadius",
  "borderStyle",
  "opacity",
  "overflow",
  "elevation"
] Check the render method of `TabBarIOS`.

我浏览了文档，但找不到关于该主题的任何内容，有什么想法吗？

Answer 1

如果您想调整字体，则需要修改 Objective-C 桥接器。例如，在RCTTabBarItem.m 中，您有以下设置代码。您可以使用setTitleTextAttributes 指定您的字体。

- (void)setIcon:(UIImage *)icon
{
  _icon = icon;
  if (_icon && _systemIcon != NSNotFound) {
    _systemIcon = NSNotFound;
    UITabBarItem *oldItem = _barItem;
    _barItem = [UITabBarItem new];
    _barItem.title = oldItem.title;
    _barItem.imageInsets = oldItem.imageInsets;
    _barItem.selectedImage = oldItem.selectedImage;
    _barItem.badgeValue = oldItem.badgeValue;
  }

  /* set custom font for tabBarItem */
  [_barItem setTitleTextAttributes:@{
      NSFontAttributeName: [UIFont fontWithName:@"Raleway-Bold" size:10.0f]
    } forState:UIControlStateSelected];
  [_barItem setTitleTextAttributes:@{
      NSFontAttributeName: [UIFont fontWithName:@"Raleway-Bold" size:10.0f]
    } forState:UIControlStateNormal];

  if (_renderAsOriginal) {
    self.barItem.image = [_icon imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
  } else {
    self.barItem.image = _icon;
  }
}