React native 删除特定于页眉的页面

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

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

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

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

完整的代码流程如下所示

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

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

从“/src/pages/HomeScreen”导入主屏幕；
从“/src/pages/SearchScreen”导入SearchScreen；
从“/src/pages/CartScreen”导入CartScreen；
从“/src/pages/AccountScreen”导入AccountScreen；
const BottomTabNavigator=createBottomTabNavigator(
{
主页：{
屏幕：主屏幕，
},
搜索：{
屏幕：搜索屏幕，
},
购物车：{
屏幕：CartScreen，
},
账户：{
屏幕：AccountScreen，
},
},
{
defaultNavigationOptions:（{navigation}）=>({
tabBarIcon:（{focused，tintColor}）=>{
const{routeName}=navigation.state；
返回(
);
},
}),
tabBarPosition:'底部'，
选项卡选项：{
风格：{
背景颜色：“#fff”，
},
showLabel:false，
指标类型：{
背景颜色：“红色”，
},
},
animationEnabled：没错，
swipeabled:false，
},
);
const HomeStackNavigator=createStackNavigator(
{
本垒打：{
屏幕：底部选项卡导航器，
},
},
{
headerbacktitlevible:false，
},
);
导出默认createAppContainer（HomeStackNavigator）；

HomeScreen.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);

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

import React，{Component}来自'React'；
从“react native”导入{View，Text}；
导出默认类主屏幕扩展组件{
静态导航选项={
标题：null，
};
render（）{
返回(
主屏幕
);
}
}

更新： 尝试更新父堆栈

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

更新： 尝试更新父堆栈

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

---

只需在您的代码中添加

静态导航选项

，就可以在代码中的任何位置（除了render或componentDidMount之类的任何方法之外）工作

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

---

只需在您的代码中添加

静态导航选项

，就可以在代码中的任何位置（除了render或componentDidMount之类的任何方法之外）工作

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

---

很高兴这有帮助，如果您认为此答案正确，请选择“作为选定项”。这不起作用。我已经在app.js中添加了完整的代码。请看一看。您是否在home.js中添加了静态导航选项={header:null}？共享该代码，直到您仍在获取标题？让我们一起分享。很高兴这有帮助，如果您认为此答案正确，请选择“作为选定项”。这不起作用。我已经在app.js中添加了完整的代码。请看一看。您是否在home.js中添加了静态导航选项={header:null}？共享代码，直到你得到标题吗？让我们看看。这不起作用。我已经在app.js中添加了完整的代码。请看一下，我刚刚更新了我的答案。尝试查看它是否适用于您删除的所有页面的标题。我只需要删除主屏幕的标题。我需要其他页面的页眉。这不起作用。我已经在app.js中添加了完整的代码。请看一下，我刚刚更新了我的答案。尝试查看它是否适用于您删除的所有页面的标题。我只需要删除主屏幕的标题。我需要其他页面的标题