[英]How to `navigate` to new screen from button in header with react-navigation?
[英]How To navigate from createMaterialTopTabNavigatorto other screen - React Navigation?
從頂部Tabnavigator導航到其他屏幕時遇到一些問題,因此我的應用程序導航是
抽屜中的“我的訂單”屏幕=>頂部TabNavigatore(已接受/已完成)=> 訂單詳細信息
在Route.js中,我放置了每個我想要的導航,例如Drawer-Auth導航等等,然后我將一個StackNavigator包含了Orders屏幕,如下所示:
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;
這是一個屏幕截圖,它應該解釋我的意思
據我了解,您擔心屏幕頂部第一個標題下方出現空白標題。
那是由createStackNavigator
創建的。
一個第一個Stack,它創建第一個名為OrdersStack
Header。
在其中,您具有創建第二個標頭的root
常量(可能是因為沒有完整的代碼)。
在root
內部,然后用兩個屏幕定義createMaterialTopTabNavigator
,這將顯示topBar帶有標簽“ accepted”和“ completed”。
要隱藏空白,您必須禁用root
標頭:
export const root = createStackNavigator({
NavTabs: NavTabs,
NavOrderDetails: NavOrderDetails
},
{
defaultNavigationOptions:{
header:null
}
});
更新。
您有兩種方法可以解決此問題,但仍然有一個backButton:
1)您可以創建一個父CustomHeader
,它使用react-navigation的withNavigation
HOC知道他的孩子的導航狀態。
2)顯示第二個時,動態隱藏父標題。 您可以使用this.props.navigation.dangerouslyGetParent().dangerouslyGetParent().setParams({showHeader:false})
完成此操作,然后您的OrdersStack將是:
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
}
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.