Как перейти от createMaterialTopTabNavigator к другому экрану - React Navigation?

Question

У меня возникли проблемы при переходе от верхнего Tabnavigator к другим экранам, поэтому навигация моего приложения:

Экран «Мои заказы» из «Ящика» => Top TabNavigatore (принято / выполнено) => Детали заказа

В Route.js я помещаю каждую нужную навигацию, например, Drawer - Auth navigation и т. Д., И помещаю StackNavigator с экраном заказов следующим образом:

const OrdersStack = createStackNavigator({
  Orders: {
    screen: Orders,
    navigationOptions: ({ navigation }) => ({
      headerLeft: (
        // <TouchableOpacity onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}>
        <TouchableOpacity
          onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
        >
          <Icon
            name="ios-menu"
            size={40}
            style={{ margin: 10 }}
            color="#2F98AE"
          />
        </TouchableOpacity>
      ),
      headerRight: <View />,
      title: "My Orders",
      headerTintColor: "#2F98AE",
      headerStyle: {
        borderBottomColor: "white"
      },
      headerTitleStyle: {
        color: "#2F98AE",
        // textAlign: "center",
        flex: 1,
        elevation: 0,
        fontSize: 25
        // justifyContent: "center"
      }
    })
  }
});

В Orders.js я положил их:

import React, { Component } from "react";
import { createAppContainer, createStackNavigator } from "react-navigation";
import NavTabs from "../screens/NavTabs";
import NavOrderDetails from "../screens/NavOrderDetails";

// create a component
export default class Orders extends Component {
  render() {
    return <MyOrdersScreen />;
  }
}

export const root = createStackNavigator({
  NavTabs: NavTabs,
  NavOrderDetails: NavOrderDetails
});

const MyOrdersScreen = createAppContainer(root);

Как я уже упоминал в Orders.js, он содержит вкладки и детали заказа

В Tabs я создаю createMaterialTopTabNavigator

import { createMaterialTopTabNavigator } from "react-navigation";
import AcceptedOrders from "../screens/AcceptedOrders";
import CompletedOrders from "../screens/CompletedOrders";

const MainTabs = createMaterialTopTabNavigator(
  {
    Accepted: { screen: AcceptedOrders },
    Completed: { screen: CompletedOrders }
  },
  {
    tabBarOptions: {
      activeTintColor: "#fff",
      inactiveTintColor: "#ddd",
      tabStyle: {
        justifyContent: "center"
      },
      indicatorStyle: {
        backgroundColor: "#fcc11e"
      },
      style: {
        backgroundColor: "#2F98AE"
      }
    }
  }
);
export default MainTabs;

, а другой экран - OrderDeatils.js

import { createStackNavigator } from "react-navigation";
import OrderDetails from "../screens/OrderDetails";
import React, { Component } from "react";
import { View } from "react-native";
const OrderDetailsStack = createStackNavigator({
  OrderDetails: {
    screen: OrderDetails,
    navigationOptions: () => ({
      title: "Order Details",
      headerRight: <View />,
      headerTintColor: "#2F98AE",
      headerStyle: {
        borderBottomColor: "white"
      },
      headerTitleStyle: {
        color: "#2F98AE",
        flex: 1,
        elevation: 0,
        fontSize: 25
      }
    })
  }
});
export default OrderDetailsStack;

Вот скриншоты, в которых должно объясняться, что я имею в виду

1- Мои заказы

2- Детали заказа

Answer 1

Если я понимаю, вас беспокоит пустой заголовок, который появляется в верхней части экрана под вашим первым заголовком.

Этот создан createStackNavigator.

A первый стек, который создает первый заголовок с именем OrdersStack.

Внутри этого у вас есть константа root (вероятно, так как нет полного кода), которая создает второй заголовок.

Внутри root вы затем определяете свой createMaterialTopTabNavigator на двух экранах, на которых отображается верхняя строка с надписью «принято» и «завершено».

Чтобы скрыть это пробел, вы должны отключить заголовок root, выполнив:

export const root = createStackNavigator({
  NavTabs: NavTabs,
  NavOrderDetails: NavOrderDetails
},
   {
     defaultNavigationOptions:{
       header:null
   }
});

UPDATE.

У вас есть два способа исправить это, но кнопка BackButton по-прежнему есть:

1) Вы можете либо создать родительский элемент CustomHeader, который, используя withNavigation HOC реагирующей навигации, будет знать о состоянии навигации его детей.

2) Динамически скрывать родительский заголовок, когда отображается второй. Вы можете сделать это, используя this.props.navigation.dangerouslyGetParent().dangerouslyGetParent().setParams({showHeader:false}) тогда ваш OrdersStack будет:

 const OrdersStack = createStackNavigator({
Orders: {
  screen: Orders,
  navigationOptions: ({ navigation }) => {
    var defaultHeader={
        headerLeft: (
        <TouchableOpacity
            onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
        >
            <Icon
            name="ios-menu"
            size={40}
            style={{ margin: 10 }}
            color="#2F98AE"
            />
        </TouchableOpacity>
        ),
        headerRight: <View />,
        title: "My Orders",
        headerTintColor: "#2F98AE",
        headerStyle: {
        borderBottomColor: "white"
        },
        headerTitleStyle: {
        color: "#2F98AE",
        // textAlign: "center",
        flex: 1,
        elevation: 0,
        fontSize: 25
        // justifyContent: "center"
        }
    }
    if (navigation.state.params)
        return(navigation.state.params.showHeader?{defaultHeader}:null)
    else return defaultHeader

  }
}


 });