无法在导航器的标题中设置自定义字体样式（React Navigation 4）答案

【问题标题】：Can not set custom font style in header of navigator (React Navigation 4)无法在导航器的标题中设置自定义字体样式（React Navigation 4）
【发布时间】：2021-11-28 19:43:31
【问题描述】：

我在反应导航 4 中为标题顶部栏设置自定义字体样式时遇到问题。我使用 MaterialTopTabNavigator 并想要设置自定义字体或只是调整标题栏中文本的大小，除了设置' 'navigationOptions' 中的标题'，没有其他我想设置的内容被应用。

这是一些上下文代码。我正在创建作为 PBNavigator 一部分的“ChatStories”-Navigator。

const ChatStories = createMaterialTopTabNavigator(
    {   
        Contacts: {
            screen: ContactsScreen,
            navigationOptions:{
                title:"PigeonBuddies"//only THIS works, no other props
            }
        },
        FriendsStories:{
            screen: FriendsStoriesScreen,
            navigationOptions:{
                title:"Stories"//only THIS works, no other props
            },
        },
    }
  );
const PBNavigator = createStackNavigator({
    Main: {
        screen: MainScreen,
        navigationOptions:{
            headerShown: false,
        }
    },
    ...
    ChatStories:{
        screen: ChatStories,
        navigationOptions:{
            headerShown: false
        }
    }
}, {
    defaultNavigationOptions:{
        backgroundColor: Platform.OS === 'android' ? Colors.primary : '',

    },
    headerTintColor: Platform.OS === 'android' ? Colors.primary : Colors.primary,
    }
);

有人可以帮我解决我的问题吗？

【问题讨论】：

标签： reactjs react-native react-navigation

【解决方案1】：

没关系，我找到了问题的解决方案。例如，您需要使用 defaultNavigationOptions 并在那里设置属性，如下所示：

const ChatStories = createMaterialTopTabNavigator(
    {   
        Contacts: {
            screen: ContactsScreen,
            navigationOptions:{
                title:"PigeonBuddies",
            }
        },
        FriendsStories:{
            screen: FriendsStoriesScreen,
            navigationOptions:{
                title:"Stories"
            },
        },
    },
    {
        defaultNavigationOptions: ({ navigation }) => {
          return {
            tabBarOptions:{
              style: {
                backgroundColor: 'darkorange',
                elevation: 0, // remove shadow on Android
                shadowOpacity: 0, // remove shadow on iOS,
                borderWidth:1,
                borderColor:'#ccc'
              },
              labelStyle: {
                fontSize: 20,
                fontFamily:"AmaticBold"
              },
            },      
          };
        }
      }
  );

您可以阅读有关这些选项的更多信息here。

【讨论】：