1

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

2 回答 2

0

您可以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',
    }
  }
});

于 2019-06-06T10:18:50.163 回答
0

我相信您在带有 routeName 的根堆栈下使用 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。

于 2018-11-24T13:48:22.627 回答