当我从反应本机的一个选项卡导航到另一个页面时如何从顶部删除选项卡栏答案

【问题标题】：How to remove tabbar from the top when I am navigating to another page from one of the tab in react native当我从反应本机的一个选项卡导航到另一个页面时如何从顶部删除选项卡栏
【发布时间】：2018-11-24 06:19:18
【问题描述】：

每个人都面临 react-native 的问题，因为我是新手。

我正在从主页调用一个标签页所以在标签页的顶部有一个导航栏，在这个导航栏下面有一个标签栏显示两个标签。

这很好，但问题从这里开始在 tabPage 我有两个标签 -> tab1 和 tab2 从 tab1 我导航到 MainPage1 页面，它在导航栏下方显示一个导航栏，在标签栏下方显示一个标签栏，另一个导航栏。如图。

我完全无法同时删除标题为 "Stopages" 的顶级导航栏和标签栏。

我正在使用 Tabview 创建此 tabbpage，并使用 stacknavigator 导航到不同的页面。我被困在这里，无法找到解决方案

注意->我尝试过使用

      navigationOptions: {
      tabBar: ({ state }) => ({
       visible: false
       })

但它没有做任何事情请帮助

   class TabPage extends React.Component{
   state = {
   index: 0,
    routes: [
     { key: 'Stopagess', title: 'Stopages' },
     { key: 'MapStopagess', title: 'Maps' },
    ],
   };

   render() {
   return (
           <TabView

         navigationState={this.state}
         renderScene={SceneMap({
         Stopagess: Stopages,
         MapStopagess: MapStopages,
             })
            }
             renderTabBar={props =>
              <TabBar
                {...props}
                style = {{backgroundColor:'#3f51b5'}}
                indicatorStyle={{ color: 'pink' }}
              />
            }
      onIndexChange={index => this.setState({ index })}
      initialLayout={{ width: Dimensions.get('window').width }}
      indicatorStyle={{ backgroundColor: 'pink' }}

       />
      );
      }

      }

这是我的 Stopages 课程

     class Stopages extends Component { 
     render()
    {
       return (
      <StopageDetail/>
     )
      } 
      }

       const StopageDetail = createStackNavigator({
      Stp:{
      screen: Stpforsomeissue,
     navigationOptions: () => ({
     header:null,
     tabBarVisible: false,
      }),



       },
       NextDetailStopage:{
      screen :StopageDetailOfStudents,
     navigationOptions: ({ navigation, screenProps }) => ({

     title:  'Stopages Detail',
    // tabBarVisible: navigation.state.params=false,
       headerStyle: { backgroundColor: '#ffd600'},
   />,
   })
  }
  })

【问题讨论】：

你能把你的stacknavigator的代码贴出来
我已经发布了更新的代码，请帮忙
把'header:null'改成headerMode:'none'
不工作....如果在 NextDetailStopage 中使用 uisng 然后删除最后一个导航栏，如果在 Stp 中使用则显示没有更改。我只希望在 StopageDetailPage 中应该只有一个导航栏并删除所有顶部栏如图所示

标签： react-native stack-navigator react-native-tab-view

【解决方案1】：

我相信您在根堆栈下使用 createMaterialTopNavigator，路由名称为 Stopages，并且在每个 Tab 路由下，您都有一个专用堆栈，第一个是 Stopages Detail。如果不是这样，请纠正我并编辑您的帖子以显示您编写的导航堆栈。

这可能对你有用：

根堆栈可以如下所示：

createStackNavigator ({
   StopPages: {screen: MyTabNavigator, navigationOptions: {header: null}}
});

TabNavigator 会是这样的：

const MyTabNavigator = createMaterialTopTabNavigator({
  Stopages:  {screen: StopagesStack},
  Maps:  {screen: MapsStack},
});

const StopagesStack = createStackNavigator({
  StopagesDetail: {screen: DetailContainer, navigationOptions: {header: null}}
});

隐藏默认堆栈导航器标题的关键是在navigationOptions中将其设置为null。

【讨论】：

不，我没有使用 createMaterialTopNavigator，而是使用 TabView。我正在发布我的标签代码。请检查我编辑的代码
navigationOptions: {header: null} 它不工作。仍然卡住

【解决方案2】：

您可以在createMaterialTopTabNavigator 的选项卡中在navigationOptions 内玩耍，以按哪些选项有TopTabBar，例如：

export const Dashboard = createMaterialTopTabNavigator({
  First: {
    screen: FirstScreen, // This is my first Tab (a View)
    navigationOptions: {
      title: 'First'
    }
  },
  Second: {
    screen: SecondStack, // This is another Stack
    navigationOptions: ({ navigation }) => ({
      title: 'SecondStack',
      tabBarVisible: navigation.state.index === 0, //Tab bar will be visible depending of the state (you can put another index)
      animationEnabled: true
    })
  },
  Third: {
    screen: ThirdScreen, // This is my third Tab (a View)
    navigationOptions: {
      title: 'ThirdScreen',
    }
  }
});

【讨论】：