集成Tab Bar组件后无法修改Navigation Bar属性求助

我来帮你分析下你遇到的这个问题：当你从普通页面跳转到包含Tab Bar的页面时，导航栏虽然能正常显示，但无法修改任何属性，而直接跳转单个页面时功能完全正常——这是因为你把TabNavigator直接作为StackNavigator的一个screen了，此时TabNavigator会接管顶部导航栏的控制权，外层的StackNavigator就没法再修改它的导航栏属性了。

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

方案一：给整个Tab Bar页面设置统一的导航栏 #

如果你希望整个Tab Bar页面有一个统一的导航栏，并且能通过外层StackNavigator控制它的属性，可以这么改：

1. 修改App.js中的StackNavigator配置 #

在MainNavigator里为Home screen添加navigationOptions，直接定义导航栏的属性：

const MainNavigator = createStackNavigator({
  Splash: {screen: SplashComponent},
  Intro: {screen: IntroScreenComponent},
  Login: {screen: LoginComponent },
  Home: {
    screen: HomeTabBarComponent,
    navigationOptions: {
      headerTitle: "首页Tab栏",
      // 这里可以添加任意导航栏属性
      headerStyle: {
        backgroundColor: '#2196F3',
      },
      headerTintColor: '#ffffff',
      headerTitleStyle: {
        fontWeight: 'bold',
      }
    }
  },
});

2. 让TabNavigator放弃导航栏控制权 #

修改HomeTabBarComponent里的TabNavigator1，设置headerMode: 'none'，让它不自己显示导航栏，交给外层Stack来管理：

const TabNavigator1 = createBottomTabNavigator({
  Home: { screen: HomeScreenCompo, navigationOptions: { title:'Home' } },
  Product:{ screen: ProductListingComponent, navigationOptions: { title:'Product' } },
  Profile:{ screen: ProfileScreenComponent, navigationOptions: { title:'Profile' } }
}, {
  headerMode: 'none' // 禁用TabNavigator自带的导航栏
});

方案二：给每个Tab页面设置独立的导航栏 #

如果你希望每个Tab对应的页面都有自己专属的导航栏（可以单独修改属性），那需要把每个Tab的页面都嵌套到独立的StackNavigator里，再放入TabNavigator：

修改HomeTabBarComponent的代码：

import React, { Component } from "react";
import { View } from "react-native";
import { Container, Content, Picker, Button, Text } from "native-base";
import { createBottomTabNavigator,createStackNavigator, createAppContainer } from 'react-navigation';
import HomeScreenCompo from './HomeScreenCompo';
import LoginComponent from './LoginComponent';
import ProductListingComponent from './ProductListingComponent';
import ProfileScreenComponent from './ProfileScreenComponent';
import IntroScreenComponent from './IntroScreenComponent';
import SplashComponent from './SplashComponent';

// 为每个Tab页面创建独立的StackNavigator
const HomeStack = createStackNavigator({
  Home: {
    screen: HomeScreenCompo,
    navigationOptions: {
      headerTitle: "首页",
      // 这里可以单独设置该页面的导航栏样式
      headerStyle: { backgroundColor: '#FF9800' }
    }
  }
});

const ProductStack = createStackNavigator({
  Product: {
    screen: ProductListingComponent,
    navigationOptions: {
      headerTitle: "产品列表",
      headerStyle: { backgroundColor: '#4CAF50' }
    }
  }
});

const ProfileStack = createStackNavigator({
  Profile: {
    screen: ProfileScreenComponent,
    navigationOptions: {
      headerTitle: "我的资料",
      headerStyle: { backgroundColor: '#9C27B0' }
    }
  }
});

// 用这些StackNavigator作为Tab的screen
const TabNavigator1 = createBottomTabNavigator({
  Home: { screen: HomeStack, navigationOptions: { title:'Home' } },
  Product:{ screen: ProductStack, navigationOptions: { title:'Product' } },
  Profile:{ screen: ProfileStack, navigationOptions: { title:'Profile' } }
});

const HomeTabBarComponent = createAppContainer(TabNavigator1);
export default HomeTabBarComponent;

这样每个Tab页面的导航栏都可以独立配置属性，完全不受外层Stack的限制，切换Tab时导航栏也会跟着切换对应的样式。

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