有人对使用堆栈和抽屉导航有经验吗?当我在OrdersNavigator和ProductsNavigator中添加navigationOptions时,图标和标题样式丢失了。请帮忙!
这是我的代码:
import React from "react";
import { createAppContainer } from "react-navigation";
import { createDrawerNavigator } from "react-navigation-drawer";
import { createStackNavigator } from "react-navigation-stack";
import { Platform } from "react-native";
import ProductsOverviewScreen from "../screens/shop/ProductsOverviewScreen";
import ProductDetailScreen from "../screens/shop/ProductDetailScreen";
import CartScreen from "../screens/shop/CartScreen";
import OrdersScreen from "../screens/shop/OrdersScreen";
import Colors from "../constants/Colors";
import { Ionicons } from "@expo/vector-icons";
const defaultNavOptions = {
headerStyle: {
backgroundColor: Platform.OS === "android" ? Colors.primary : ""
},
headerTitleStyle: {
fontFamily: "open-sans-bold"
},
headerBackTitleStyle: {
fontFamily: "open-sans"
},
headerTintColor: Platform.OS === "android" ? "white" : Colors.primary
};
const ProductsNavigator = createStackNavigator(
{
ProductsOverview: ProductsOverviewScreen,
ProductDetail: ProductDetailScreen,
Cart: CartScreen
},
{
navigationOptions: {
drawerIcon: (drawerConfig) => (
<Ionicons name={Platform.OS === "android" ? "md-cart" : "ios-cart"} size={23} color={drawerConfig.tintColor} />
)
}
},
{
defaultNavigationOptions: defaultNavOptions
}
);
const OrdersNavigator = createStackNavigator(
{
Orders: OrdersScreen
},
{
navigationOptions: {
drawerIcon: (drawerConfig) => (
<Ionicons name={Platform.OS === "android" ? "md-list" : "ios-list"} size={23} color={drawerConfig.tintColor} />
)
}
},
{ defaultNavigationOptions: defaultNavOptions }
);
const ShopNavigator = createDrawerNavigator(
{
Products: ProductsNavigator,
Orders: OrdersNavigator
},
{
contentOptions: {
activeTintColor: Colors.primary
}
}
);
export default createAppContainer(ShopNavigator);
应该有标题左侧和右侧图标,带有彩色标题。如果我删除OrderNavigation和ProductNavigation的navigationOptions,则会显示它们。