如何从 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

来自抽屉的我的订单屏幕 => Top TabNavigatore(接受/完成)=> 订单详情

My Orders Screen from Drawer => Top TabNavigatore (Accepted/Completed) => Order Details

在 Route.js 中我把我想要的每一个导航都放在抽屉里 - 身份验证导航等等，我把一个包含订单屏幕的 StackNavigator 像这样:

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;

另一个屏幕是 OrderDetails.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 创建的.

创建第一个名为 OrdersStack 的 Header 的第一个 Stack.

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.

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屋！