createBottomTabNavigator не отображает createStackNavigator при нажатии

Я следую руководству по реагированию на навигацию, и все работало нормально, пока я не попробовал использовать 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


person Ketan Ramteke    schedule 05.02.2020    source источник
comment
Из того, что я видел, похоже, что ваш MealsList компонент является функцией, так что это определенно проблема, если вы просто возвращаете его как реагирующий компонент.   -  person Auticcat    schedule 05.02.2020
comment
преобразовал MealsList в компонент на основе классов, но он все еще не работает   -  person Ketan Ramteke    schedule 05.02.2020


Ответы (1)


Сегодня у меня была аналогичная проблема. Я спас его, понизив / обновив response-native-screen до версии: "react-native-screen": "2.1.0". Раньше было 2.4

person Dmytro Mezhenskyi    schedule 14.04.2020