问题描述
从顶部 Tabnavigator 导航到其他屏幕时遇到一些问题所以我的应用导航是
I have some issue when navigating from top Tabnavigator to other screensso my app navigation is
来自抽屉的我的订单屏幕 => Top TabNavigatore(接受/完成)=> 订单详情
在 Route.js 中我把我想要的每一个导航都放在抽屉里 - 身份验证导航等等,我把一个包含订单屏幕的 StackNavigator 像这样:
In Route.jsI 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?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!