如何从createMaterialTopTabNavigator导航到其他屏幕-React Navigation? [英] How To navigate from createMaterialTopTabNavigatorto other screen - React Navigation?

问题描述

从顶部Tabnavigator导航到其他屏幕时，我遇到一些问题所以我的应用程序导航是

I have some issue when navigating from top Tabnavigator to other screens so my app navigation is

我的抽屉中的订单屏幕=>顶部TabNavigatore(已接受/已完成)=> 订单详细信息

在Route.js中我把想要的每个导航都放进了抽屉-Auth导航等等，然后我将一个StackNavigator包含了这样的Orders屏幕:

In Route.js I put every single navigation I want like Drawer - Auth navigation and so on, and I put a StackNavigator contain the Orders Screen like this:

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中，我输入了以下内容:

In the Orders.js I put these:

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中提到的那样，它包含标签和订单详细信息

As I mentioned in Orders.js it Contains Tabs and Order Details

在标签中，我正在创建 createMaterialTopTabNavigator

In Tabs, I'm creating a 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

and another screen is 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;

这是一个屏幕截图，它应该解释我的意思

Here are a screenShots it should explain what I mean

1-我的订单

2-订单详细信息

推荐答案

如果我理解，您担心屏幕顶部的空白标题会出现在您的第一个标题下方.

If i understand, you are concerned about the blank header that appears on top of the screen under your first header.

那是由 createStackNavigator 创建的.

第一个Stack，它创建第一个名为 OrdersStack 的标头.

A the first Stack that creates the first Header named OrdersStack.

在其中，您具有创建第二个标头的 root 常量(可能是因为没有完整的代码).

Inside that you have the root constant (probably, as there isn't the full code) that is creating the second header.

在 root 内部，然后用两个屏幕定义 createMaterialTopTabNavigator ，这将显示topBar带有标签"accepted"和"completed".

Inside root you are then defining your createMaterialTopTabNavigator with your two screens, that's showing the topBar with the label "accepted" and "completed".

要隐藏该空白，您必须禁用 root 标头:

To hide that white space you have to disable your root header doing:

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

更新.

您有两种方法可以解决此问题，但仍然有一个backButton:

You have two ways to fix this and still have a backButton:

1)您可以创建一个父 CustomHeader ，它使用react-navigation的 withNavigation HOC知道他的孩子的导航状态.

1) You can either create a parent CustomHeader that, using react-navigation's withNavigation HOC, is aware about his childrens navigation state.

2)在显示第二个时，动态隐藏父标头.您可以使用 this.props.navigation.dangerouslyGetParent().dangerouslyGetParent().setParams({showHeader:false})完成此操作那么您的OrdersStack将是:

2) Dinamically hide the parent header when the second one is showing. You can accomplish this using this.props.navigation.dangerouslyGetParent().dangerouslyGetParent().setParams({showHeader:false}) then your OrdersStack would be:

 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

  }
}


 });

这篇关于如何从createMaterialTopTabNavigator导航到其他屏幕-React Navigation?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！