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

Question

我在为 React Navigation 4 中的 header 顶部栏设置自定义字体样式时遇到问题。我使用 MaterialTopTabNavigator 并想设置自定义字体或只是调整 [= 中的文本大小21=] 栏，除了在 'navigationOptions' 中设置 'title' 之外没有任何作用，我想设置的其他任何东西都没有应用。

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

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

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

Answer 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。

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

Can not set custom font style in header of navigator (React Navigation 4)

reactjs

react-native

react-navigation