删除标题特定页面

Question

我在 App.js 中有以下页面设置

StackNavigator({
   MyTab: {
     screen: TabNavigator({ }),
     navigationOptions: { title: 'Header title' }
  }
})

底部标签导航器有 4 个屏幕：主页、搜索、卡和帐户。此选项卡导航器位于堆栈导航器内，因为我需要堆栈导航器来打开这些页面内的其他屏幕。

在我的情况下，我不需要标签导航器内主页中的标题。但是根据此代码，选项卡导航器中的每个页面都会有标题。我怎样才能做到这一点？

完整的代码流程是这样的。

App.js

import HomeScreen from './src/pages/HomeScreen';
import SearchScreen from './src/pages/SearchScreen';
import CartScreen from './src/pages/CartScreen';
import AccountScreen from './src/pages/AccountScreen';

const BottomTabNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    Search: {
      screen: SearchScreen,
    },
    Cart: {
      screen: CartScreen,
    },
    Account: {
      screen: AccountScreen,
    },
  },
  {
    defaultNavigationOptions: ({navigation}) => ({
      tabBarIcon: ({focused, tintColor}) => {
        const {routeName} = navigation.state;
        return (
          <Image
            style={styles.iconSize}
            source={require('./src/assets/img/icon.png')}
          />
        );
      },
    }),
    tabBarPosition: 'bottom',
    tabBarOptions: {
      style: {
        backgroundColor: '#fff',
      },
      showLabel: false,
      indicatorStyle: {
        backgroundColor: 'red',
      },
    },
    animationEnabled: true,
    swipeEnabled: false,
  },
);

const HomeStackNavigator = createStackNavigator(
  {
    HomeStack: {
      screen: BottomTabNavigator,
    },
  },
  {
    headerBackTitleVisible: false,
  },
);

export default createAppContainer(HomeStackNavigator);

HomeScreen.js

import React, {Component} from 'react';
import {View, Text} from 'react-native';

export default class HomeScreen extends Component {
  static navigationOptions = {
    header: null,
  };

  render() {
    return (
      <View>
        <Text> HomeScreen </Text>
      </View>
    );
  }
}

Answer 1

只需在代码中的任何位置添加 static navigationOptions 即可，除了在 r​​ender 或 componentDidMount 等任何方法中，它就可以工作

export default class Home extends Component {
    static navigationOptions = {
        header: null
    }
}

Answer 2

更新：

尝试更新您的父堆栈

const HomeStackNavigator = createStackNavigator(
  {
    HomeStack: {
      screen: BottomTabNavigator,
    },
  },
  {
    headerBackTitleVisible: false,
    headerMode: 'none',
  },
);

旧答案

试试下面

export default class Home extends React.Component {
    static navigationOptions = () => {
        const navigationOptions = {
            header: null,
            headerMode: 'none',
        };
        return navigationOptions;
    };
}