时间戳

首页 > 解决方案 > 当我从反应原生的一个选项卡导航到另一个页面时，如何从顶部删除选项卡栏

react-native - 当我从反应原生的一个选项卡导航到另一个页面时，如何从顶部删除选项卡栏

问题描述

每个人我都面临 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' }}

       />
      );
      }

      }

这是我的停课课

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

标签： react-nativestack-navigatorreact-native-tab-view

解决方案

您可以navigationOptions在一个选项卡内createMaterialTopTabNavigator按顺序播放哪些有 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',
    }
  }
});

推荐阅读