当我从 React Native 中的一个选项卡导航到另一个页面时，如何从顶部删除选项卡栏

Question

每个人我都遇到了 react-native 中的问题，因为我是新手。

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

到目前为止还不错，但问题从这里开始在 tabPage 我有两个选项卡 ->tab1 和 tab2 我从 tab1 导航到页面 MainPage1，它在导航栏下方显示一个导航栏，在另一个导航栏下方显示一个标签栏。如图所示

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

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

注意->我试过使用

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

       />
      );
      }

      }

这是我的停车位class

     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'},
   />,
   })
  }
  })

Answer 1

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

这可能对您有用：

根堆栈可以如下所示：

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

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

Answer 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',
    }
  }
});

当我从 React Native 中的一个选项卡导航到另一个页面时，如何从顶部删除选项卡栏

How to remove tabbar from the top when I am navigating to another page from one of the tab in react native

react-native

stack-navigator

react-native-tab-view