如何解决出现错误:“路由‘过滤器’的组件必须是 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 举报,一经查实,本站将立刻删除。