出现错误：“路由‘过滤器’的组件必须是 React 组件”在尝试创建抽屉导航器

问题描述

我正在创建我的第一个反应导航应用程序，更具体地说是一个菜单应用程序。在此过程中，我遇到了一个一直在努力解决的问题。

这个问题如下：

我创建了一个名为 MealsNavigation.js 的导航组件：

import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation'
// import { createBottomTabNavigator } from 'react-navigation-tabs';
// import { createDrawerNavigator } from 'react-navigation-drawer';
import CategoriesScreen from '../screens/CategoriesScreens';
import CategoryMealsScreen from '../screens/CategoryMealsScreen';
import MealDetailScreen from '../screens/MealDetailScreen';
import Color from '../constants/Colors';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import FavoriteScreen from '../screens/FavoriteScreen';
import {Ionicons} from '@expo/vector-icons'
import React from 'react';
import {createMaterialBottomTabNavigator} from 'react-navigation-material-bottom-tabs'
import { Platform } from 'react-native';
import {createDrawerNavigator} from 'react-navigation-drawer';

import {FilteRSScreen} from '../screens/FilteRSScreen';

const defaultScreenConfig ={
    
    initialRouteName: 'Categories',defaultNavigationoptions: {
      headerStyle: {
        backgroundColor:  Color.primaryColor 
      },headerTintColor:'white',headerTitle: 'A Screen'
    }
  };



const MealsNavigator =  createStackNavigator({
    Categories:{
        screen: CategoriesScreen,navigationoptions:{
            headerTitle:"Meal Category ",headerStyle:{
                backgroundColor: Color.primaryColor,},headerTintColor: 'white'
        }
    },CategoryMeals:{
        screen: CategoryMealsScreen,MealDetail: MealDetailScreen

},defaultScreenConfig);

const favNavigator = createStackNavigator ({
  Favorites: FavoriteScreen,MealDetail:MealDetailScreen

},defaultScreenConfig);

const tabScreenConfig={
  


  Meals: {
      screen:MealsNavigator,navigationoptions:{
      tabBarIcon:(tabInfo)=>{
        return <Ionicons name='ios-restaurant' size={25} color={tabInfo.tintColor}/>
      },tabBarColor:Color.primaryColor
    },Favorites: {
    screen:favNavigator,navigationoptions:{
      tabBarLabel:'Favorite!',tabBarIcon:(tabInfo)=>{
        return <Ionicons name='ios-star' size={25} color={tabInfo.tintColor}/>
      },tabBarColor:Color.accentColor
    },}

};





const MealsFavTabNavigator = Platform.OS==='android'?   createMaterialBottomTabNavigator(tabScreenConfig,{
  
  activeColor: 'white',shifting:true

})
:createBottomTabNavigator({

  
  tabBarOptions:{
    activeTintColor: Color.accentColor
  }
});


const FiltersNavigator = createStackNavigator({
  Filters: FilteRSScreen

});


const MainNavigator =  createDrawerNavigator({
   MealsFavs: MealsFavTabNavigator,Filters: FiltersNavigator
});





export default createAppContainer(MainNavigator);

所以，我收到此错误：

> Error: The component for route 'Filters' must be a React component.
> For example:
> 
> import MyScreen from './MyScreen'; ... Filters: MyScreen,}
> 
> You can also use a navigator:
> 
> import MyNavigator from './MyNavigator'; ... Filters: MyNavigator,}
> - node_modules\expo\build\logs\LogSerialization.js:160:14 in _captureConsoleStackTrace
> - node_modules\expo\build\logs\LogSerialization.js:41:26 in serializeLogDataAsync
> - ... 9 more stack frames from framework internals

在那之后，我完全按照建议的日志做了，我检查了我的 FilterScreen.js 组件是否导出良好：

import React from 'react';
import { View,Text,StyleSheet } from 'react-native';

const FilteRSScreen = props => {
  return (
    <View style={styles.screen}>
      <Text>The Filters Screen!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  screen: {
    flex: 1,justifyContent: 'center',alignItems: 'center'
  }
});

export default FilteRSScreen;

在我看来，是的。

我确定问题出在 MealsNavigator.js 上的这些行上：

const FiltersNavigator = createStackNavigator({
  Filters: FilteRSScreen

});


const MainNavigator =  createDrawerNavigator({
   MealsFavs: MealsFavTabNavigator,Filters: FiltersNavigator
});





export default createAppContainer(MainNavigator);

但我无法确定，因此，我想回答一些帮助，如果有人这样做，我将不胜感激，谢谢。

如果你想看我的整个项目，你可以通过：

https://github.com/lucasvittal2/MyFirstReactNativeAppNavigator

注意：所有必要的包都已安装。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）