我正在关注 react-navigation 教程,一切正常,直到我尝试使用,createBottomTabNavigator
我将两个传递createStackNavigator
给createBottomTabNavigator
我遇到了空白屏幕,FavNavigator
根本没有渲染。
我尝试用组件替换FavNavigator
它FavoritesScreen
并显示它,但缺少标题栏。
这是应用程序:
这是导航器配置代码:
import React from "react";
import { createStackNavigator } from "react-navigation-stack";
import { createBottomTabNavigator } from "react-navigation-tabs";
import { createAppContainer } from "react-navigation";
import { Ionicons } from "@expo/vector-icons";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
import CategoriesScreen from "../screens/CategoriesScreen";
import CategoryMealsScreen from "../screens/CategoryMealsScreen";
import MealsDetailScreen from "../screens/MealsDetailScreen";
import FavoritesScreen from "../screens/FavoritesScreen";
import Colors from "../constans/Colors";
import { Platform } from "react-native";
const defaultStackNavOptions = {
headerStyle: {
backgroundColor: Platform.OS === "android" ? Colors.primaryColor : ""
},
headerTintColor: Platform.OS === "android" ? "white" : Colors.primaryColor,
headerTitle: "A Screen"
};
const MealsNavigator = createStackNavigator(
{
Categories: {
screen: CategoriesScreen
},
CategoryMeals: {
screen: CategoryMealsScreen
},
MealDetail: MealsDetailScreen
},
{
defaultNavigationOptions: defaultStackNavOptions
}
);
const FavNavigator = createStackNavigator(
{
Favorites: FavoritesScreen,
MealDetail: MealsDetailScreen
},
{
defaultNavigationOptions: defaultStackNavOptions
}
);
const tabScreenConfig = {
Meals: {
screen: MealsNavigator,
navigationOptions: {
tabBarIcon: tabInfo => {
return (
<Ionicons name="ios-restaurant" size={25} color={tabInfo.tintColor} />
);
},
tabBarColor: Colors.primaryColor
}
},
Favorites: {
screen: FavNavigator,
navigationOptions: {
tabBarIcon: tabInfo => {
return <Ionicons name="ios-star" size={25} color={tabInfo.tintColor} />;
},
tabBarColor: Colors.accentColor
}
}
};
const MealsFavTabNavigator =
Platform.OS === "android"
? createMaterialBottomTabNavigator(tabScreenConfig, {
activeTintColor: "white",
shifting: true,
barStyle: {
backgroundColor: Colors.primaryColor
}
})
: createBottomTabNavigator(tabScreenConfig, {
tabBarOptions: {
activeTintColor: Colors.accentColor
}
});
export default createAppContainer(MealsFavTabNavigator);
提前致谢。
完整代码: GitHub