React Native 更改导航栏字体答案

【问题标题】：React Native Change Navigation Bar FontReact Native 更改导航栏字体
【发布时间】：2016-06-01 14:47:07
【问题描述】：

我已经阅读了很多帖子并了解到到目前为止 React Native 中没有更改导航栏字体的功能，所以我知道我需要以某种方式手动完成。我试图将以下代码粘贴到我拥有的 React Native 项目中的 AppDelegate.m 中

[[UINavigationBar appearance] setTitleTextAttributes:
          @{NSFontAttributeName : [UIFont fontWithName:@"Bodoni 72" size:22.0],
          NSForegroundColorAttributeName : [UIColor blueColor]}];

但这不起作用。我还想我可以尝试在 RCTConvert.m 中手动编辑。但这也没有奏效。有谁知道我还应该尝试什么？谢谢！

【问题讨论】：

你能解决这个问题吗？如果有，怎么做？
使用什么组件来呈现你的导航栏？你是在使用内置的 Navigator/NavigatorIOS 组件，还是在使用不同的东西？

标签： ios reactjs react-native ios9 navigationbar

【解决方案1】：

首先，我假设您使用的是 NavigatorIOS。如果不是，则以下内容不适用。

不幸的是，由于 React Native 编码导航栏外观的方式发生了变化，您的方法不起作用。我做了一个小补丁，可以让你的代码工作。我可能会将此提交给 React Native，但尚未决定：

--- a/node_modules/react-native/React/Views/RCTWrapperViewController.m
+++ b/node_modules/react-native/React/Views/RCTWrapperViewController.m
@@ -115,9 +115,11 @@ static UIView *RCTFindNavBarShadowViewInView(UIView *view)
     bar.barTintColor = _navItem.barTintColor;
     bar.tintColor = _navItem.tintColor;
     bar.translucent = _navItem.translucent;
-    bar.titleTextAttributes = _navItem.titleTextColor ? @{
-      NSForegroundColorAttributeName: _navItem.titleTextColor
-    } : nil;
+    if (_navItem.titleTextColor != nil) {
+        NSMutableDictionary *newAttributes = bar.titleTextAttributes ? bar.titleTextAttributes.mutableCopy :  [NSMutableDictionary new];
+        [newAttributes setObject:_navItem.titleTextColor forKey:NSForegroundColorAttributeName];
+        bar.titleTextAttributes = newAttributes;
+    }

     RCTFindNavBarShadowViewInView(bar).hidden = _navItem.shadowHidden;

【讨论】：