React Native Tab导航页面标题不显示问题求助

我看了你的代码结构，问题出在外层StackNavigator和内层TabNavigator的层级关系上：你把整个TabNavigator作为外层StackNavigator的一个单一页面（Root），这时候页面的导航栏标题是由外层StackNavigator控制的，而Tab内部页面的navigationOptions里的标题配置会被外层栈覆盖，所以标题无法显示。

下面给你两种常用的解决方案，你可以根据自己的需求选择：

方案1：给每个Tab页面嵌套独立的StackNavigator（推荐） #

这种方式让每个标签页拥有自己的导航栈，不仅能解决标题显示问题，还方便后续每个Tab内的页面跳转时维护各自的导航栏状态。

修改你的src/navigation/index.js代码如下：

import React, { Component } from 'react';
import { Platform, StyleSheet, StatusBar, Text, View } from 'react-native';
import { createBottomTabNavigator, createStackNavigator } from 'react-navigation';
import { Icon } from 'react-native-elements';
import Colors from '../constants/Colors';
import Splash from '../components/Splash/Splash';
import Login from '../components/Login/Login';
import Home from '../components/Home/Home';
import Profile from '../components/Profile/Profile';

// 为Home页面创建独立的导航栈
const HomeStack = createStackNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      title: 'Home' // 这里设置Home页面的标题
    }
  }
});

// 为Profile页面创建独立的导航栈
const ProfileStack = createStackNavigator({
  Profile: {
    screen: Profile,
    navigationOptions: {
      title: 'Profile' // 这里设置Profile页面的标题
    }
  }
});

const MainNavigator = createStackNavigator({
  // 保留你原来的Splash、Login路由（如果需要的话）
  // Splash: {screen: Splash, navigationOptions:{ header: null, title: 'Splash'}},
  // Login: {screen: Login, navigationOptions:{ header: null, title: 'Login'}},
  Root: {
    screen: createBottomTabNavigator({
      home: {
        screen: HomeStack, // 替换为Home的独立栈
        navigationOptions: {
          tabBarLabel: 'Home',
          tabBarIcon: ({ tintColor, focused }) => (
            <Icon name={'home'} size={24} color={focused ? Colors.tabIconSelected : Colors.tabIconDefault} />
          ),
        }
      },
      profile: {
        screen: ProfileStack, // 替换为Profile的独立栈
        navigationOptions: {
          tabBarLabel: 'Profile',
          tabBarIcon: ({ tintColor, focused }) => (
            <Icon name={'account-circle'} size={24} color={focused ? Colors.tabIconSelected : Colors.tabIconDefault} />
          ),
        }
      }
    }, {
      tabBarOptions: {
        activeTintColor: Colors.tintColor,
        showLabel: true,
        showIcon: true,
        indicatorStyle: { backgroundColor: 'transparent' },
        iconStyle: { width: 24, height: 24 },
        style: { backgroundColor: '#eeeeee', },
      },
      lazy: true,
      tabBarPosition: 'bottom',
    }),
    // 如果不需要外层栈的导航栏，可以设置header为null
    // navigationOptions: {
    //   header: null
    // }
  }
});

export default MainNavigator;

方案2：动态设置外层StackNavigator的标题 #

如果你的场景比较简单，不需要每个Tab有独立的页面栈，可以通过TabNavigator的navigationOptions动态获取当前选中的Tab，来设置外层栈的标题：

修改Root页面的配置：

const MainNavigator = createStackNavigator({
  Root: {
    screen: createBottomTabNavigator({
      // 你的Tab配置和原来保持一致
      home: {
        screen: Home,
        navigationOptions: {
          tabBarLabel: 'Home',
          tabBarIcon: ({ tintColor, focused }) => (
            <Icon name={'home'} size={24} color={focused ? Colors.tabIconSelected : Colors.tabIconDefault} />
          ),
        }
      },
      profile: {
        screen: Profile,
        navigationOptions: {
          tabBarLabel: 'Profile',
          tabBarIcon: ({ tintColor, focused }) => (
            <Icon name={'account-circle'} size={24} color={focused ? Colors.tabIconSelected : Colors.tabIconDefault} />
          ),
        }
      }
    }, {
      // Tab配置和原来保持一致
      tabBarOptions: {
        activeTintColor: Colors.tintColor,
        showLabel: true,
        showIcon: true,
        indicatorStyle: { backgroundColor: 'transparent' },
        iconStyle: { width: 24, height: 24 },
        style: { backgroundColor: '#eeeeee', },
      },
      lazy: true,
      tabBarPosition: 'bottom',
    }),
    // 动态设置外层栈的标题
    navigationOptions: ({ navigation }) => {
      // 获取当前活跃的Tab路由名称
      const activeRoute = navigation.state.routes[navigation.state.index].routeName;
      // 根据路由返回对应标题
      const titleMap = {
        home: 'Home',
        profile: 'Profile'
      };
      return {
        title: titleMap[activeRoute] || 'My App'
      };
    }
  }
});

为什么原来的代码不生效？ #

你原来在Tab页面的navigationOptions里设置的title和headerTitle不会生效，因为外层的StackNavigator只会管理自己直接子页面的导航栏配置，而TabNavigator作为一个整体被当作了外层栈的一个页面，所以内层Tab的标题配置被忽略了。

内容的提问来源于stack exchange，提问作者Nilesh