如何从TabBar react-native隐藏现有的标题栏

时间:2019-03-28 05:08:21

标签: react-native

Hii,我的TabBar名称为Home,并且设置为带有标题栏,并且在Home Tab中,有一个按钮可以转到Details类,并且我想在进入details类时隐藏标题栏

enter image description here

当我按下“转到标签”按钮时,“详细信息”类打开,其中再次显示了标签栏的标题栏,我想将其隐藏

调用TabBar的代码

const RootStack = createStackNavigator(
{
    First: {screen: First},
  TopTabs: {screen: TopTabs}
},
{initialRouteName: 'First'}

);

TabBar的代码

const HomeRoot = createStackNavigator({   
Home: {
  screen: Home,
  navigationOptions: {
    header: null,
  }, 
},    
Details: {
  screen: Details,
  navigationOptions: {
    header: null,
   }, 
  },
},{
initialRouteName: 'Home'});

两个标签首页和设置的代码

  const RootStack = createMaterialTopTabNavigator(
    {
     Home: {
      screen: HomeRoot,
      navigationOptions : {
      tabBarLabel: 'Home',
      tabBarIcon:  <Image source={{uri: 
      'https://png.icons8.com/Home/ultraviolet/50/3498db'}} style= . 
      {{width:20, height: 20}}/>
     },
    },
    Settings: {
     screen: Settings,
     navigationOptions : {
      tabBarLabel: 'Setting',
      tabBarIcon:  <Image source={{uri: 
      'https://png.icons8.com/Home/ultraviolet/50/3498db'}} style= . 
      {{width:20, height: 20}}/>
     },     
   },
 }, 

TopTab的代码

export default class TopTabs extends React.Component {  
  static navigationOptions = ({ navigation }) => {
   return {
     title: navigation.getParam('otherParam', 'A Nested 
       DetailsScreen'),
    };
  }; 

 constructor(props) {
  super(props);  
 }     
 render() {  
   const { navigation } = this.props;
   const otherParam = navigation.getParam('otherParam', 'some default 
   value');
   return (
      <AppScreen/>
   );
    } 
   }

1 个答案:

答案 0 :(得分:0)

添加导航选项:

static navigationOptions = {
    headerMode: 'none'
}

或其他解决方案:

static navigationOptions = { header: null }

const HomeRoot = createStackNavigator({   
Home: {
  screen: Home, 
},    
Details: {
  screen: Details,
},{
headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
initialRouteName: 'Home'});