Question

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

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

在Route.js中我把想要的每个导航都放进抽屉-Auth导航等等，然后我将一个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中提到的，它包含标签和订单详细信息

在标签中，我正在创建 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创建的。

第一个堆栈创建第一个名为OrdersStack的标头。

在其中，您有一个root常量（可能是因为没有完整的代码）来创建第二个标头。

然后在root的两个屏幕中定义createMaterialTopTabNavigator，这将显示带有标签“已接受”和“已完成”的topBar。

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

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

更新。

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

1）您可以使用响应导航的CustomHeader HOC创建一个父withNavigation，该父this.props.navigation.dangerouslyGetParent().dangerouslyGetParent().setParams({showHeader:false})知道他的孩子的导航状态。

2）在显示第二个标题时，动态隐藏了父标题。您可以使用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 } } });完成此操作那么您的OrdersStack将是：

public LiveData<Note> getNote(String search){
    repository.getNote(search);
    if(note != null)
    {
        return note; // this is the livedata reference that UI is observing
    }
    return null;
}

如何从createMaterialTopTabNavigator导航到其他屏幕-React Navigation？

1 个答案: