问题描述
从顶部Tabnavigator导航到其他屏幕时,我遇到一些问题所以我的应用程序导航是
I have some issue when navigating from top Tabnavigator to other screensso my app navigation is
在Route.js中我把想要的每个导航都放进了抽屉-Auth导航等等,然后我将一个StackNavigator包含了这样的Orders屏幕:
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;
另一个屏幕是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?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!