在 React Native 中实现 Tab Navigator 时出错答案

【问题标题】：Getting error while implementing Tab Navigator in React Native在 React Native 中实现 Tab Navigator 时出错
【发布时间】：2020-02-10 17:33:12
【问题描述】：

尝试在 React Native 应用程序中创建一个 BottomTabNavigtor。这是我的导航代码。

import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Platform } from "react-native";

import CategoriesScreen from "../screens/CategoriesScreen";
import CategoryMealScreen from "../screens/CategoryMealScreen";
import MealDetailScreen from "../screens/MealDetailScreen";
import FavoritesScreen from "../screens/FavoritesScreen";
import Colors from "../constants/colors";

const MealsNavigator = createStackNavigator(
  {
    Categories: {
      screen: CategoriesScreen,
      navigationOptions: {
        title: "Meal Categories"
      }
    },
    CategoryMeals: {
      screen: CategoryMealScreen
    },  MealDetail: MealDetailScreen
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: Platform.OS === 'android' ? Colors.primaryColor : ''
      },
      headerTintColor: Platform.OS === 'android' ? 'white' : Colors.primaryColor
    },
  }
);

const MealsFavTabNavigator = createBottomTabNavigator({
  Meals: MealsNavigator,
  Favorites: FavoritesScreen
});

export default createAppContainer(MealsFavTabNavigator);

学习此应用程序的课程。收到此错误：

TypeError: (0, _native.createNavigatorFactory) 不是函数。 (在'(0, _native.createNavigatorFactory)(BottomTabNavigator)', '(0, _native.createNavigatorFactory)' 未定义）

任何帮助将不胜感激。谢谢。

【问题讨论】：

标签： reactjs react-native tabnavigator react-navigation-bottom-tab

【解决方案1】：

如果你使用的是最新版本的 react-navigation，很多事情都发生了变化：

https://reactnavigation.org/docs/en/bottom-tab-navigator.html

现在你必须使用这个语法：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

【讨论】：