Question

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

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

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;
  }
}

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

1 个答案: