如何在React Native中使用<TabBarIOS>的自定義字體？

我正在使用<TabBarIOS>組件，我有自定義圖標的工作（使用react-native-vector-icons），但我很努力在<Icon.TabBarItemIOS>組件上獲得自定義fontFamily。我希望能夠更改每個圖標下方文本標籤的字體。如何在React Native中使用<TabBarIOS>的自定義字體？

我已經嘗試添加樣式到兩個標籤欄和標籤欄項目，但它會返回錯誤：

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`.

我已經通過文檔看了，但找不到任何的主題，有什麼想法？

來源

2016-06-09 Brad Adams

根據我的經驗，TabBarIOS在objective-c之外不是很可定製的。我結束了使用https://github.com/exponentjs/react-native-tab-navigator。 –

你可以分享你是如何得到在TabBarIOS工作的react-native-vector-icons的嗎？ –

@SergeySinkovskiy，當然！這是在他們的文檔在這裏：https://github.com/oblador/react-native-vector-icons#usage-with-tabbarios –

如果您想調整字體，您需要修改Objective-C橋接。例如，在中，您有以下設置代碼。您可以使用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; 
    } 
}

來源

2016-06-15 01:09:36 wsun

我不想爲我的項目添加整個包來改變字體，這就像一個魅力..乾杯！ –

如何在React Native中使用<TabBarIOS>的自定義字體？

回答

相關問題