Как убрать вкладку сверху при переходе на другую страницу с одной из вкладок в реагировать родной - PullRequest
Новая
       29

Как убрать вкладку сверху при переходе на другую страницу с одной из вкладок в реагировать родной

0 голосов
/ 24 ноября 2018

У всех, с кем я сталкиваюсь, есть проблема вact-native, поскольку я новичок в этом.

Я вызываю вкладку из homePage, поэтому на вкладке вверху находится панель навигации, под этой панелью навигации расположена панель вкладок.показаны две вкладки. enter image description here

Это хорошо до сих пор, но проблема начинается здесь. В tabPage у меня есть две вкладки -> tab1 и tab2 из tab1 Я перехожу на страницу MainPage1, гдеон показывает панель навигации ниже панели навигации, панель вкладок под панелью вкладок и другую панель навигации.Как показано на рисунке. enter image description here

Я не могу удалить ни панель навигации верхнего уровня с заголовком "Stopages" , ни панель вкладок.

Я использую Tabview для создания этой вкладки и использую 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'},
   />,
   })
  }
  })

Ответы [ 2 ]

0 голосов
/ 06 июня 2019

Вы можете поиграть в пределах 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',
    }
  }
});
0 голосов
/ 24 ноября 2018

Я полагаю, что вы используете createMaterialTopNavigator под корневым стеком с routeName 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}}
});

Ключ, чтобы скрыть заголовок навигатора стека по умолчанию, заключается в том, чтобы установить его в null в navigationOptions.

...