TabNavigation 中的标题标题为空 [英] Header title is empty in TabNavigation

问题描述

标题似乎没有按预期工作.

Header title seems to not work as expected.

我已经将 react-native 和所有其他依赖项更新到最新版本，并查看了 react-navigation 文档.此外，我在 github 上为此项目创建了一个错误.

I already updated react-native and all other dependencies to their latest version and reviewed react-navigation documentation. Also I created a bug on github for this item.

你能不能看看我做错了什么?我需要在使用 TabNavigation 时设置标题标题

Can you please take a look if I doing something wrong? I need to have header title set when i am using TabNavigation

const RootNavigator = createStackNavigator({
    ...publicScreens,
    Private: {
        screen: PrivateNavigator
    }
}, publicScreensConfig);

const privateScreens = {
    ContactList: {
        screen: ContactList
    },
    Settings: {
        screen: Settings
    }
};

.....

export default createBottomTabNavigator( privateScreens, options );
import React, { Component } from 'react'
import { Text, View } from 'react-native'
import GlobalColors from '../../config/colors';

export default class Settings extends Component {
    static navigationOptions = {
        title: 'Settings',
        headerStyle: {
            backgroundColor: GlobalColors.grayDark,
        },
        headerTintColor: 'white',
        headerTitleStyle: {
            fontWeight: 'bold',
        },
        gesturesEnabled: false,
    }

    render() {
        return (
            <View>
        <Text> Settigs </Text>
      </View>
        )
    }
}

但我在标题窗格中看到空标题.我想查看来自导航选项的标题文本

But I see empty header title in the header pane. I want to see header text that come from navigation Options

推荐答案

感谢 JinHoSo 答案在这里

const bottomTabNavigator = createBottomTabNavigator(...)

bottomTabNavigator.navigationOptions = ({navigation, screenProps}) => {
  const childOptions = getActiveChildNavigationOptions(navigation, screenProps)
  return {
    title      : childOptions.title,
    headerLeft : childOptions.headerLeft,
    headerRight: childOptions.headerRight,
  }
}

这篇关于TabNavigation 中的标题标题为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！