检查抽屉项目的渲染方法

Question

我正在通过 expo 使用 react-native，并按照本指南进行操作：https://blog.waldo.io/react-native-side-menu-guide/

或者，我现在如何在没有图标的情况下重写它？

但是，当我编译时，它说我需要检查 DrawerItem 的渲染方法。不确定是什么原因造成的，因为我已经安装了所有东西并且语法似乎已经检查出来了。

这是我的 App.js：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {NavigationContainer} from '@react-navigation/native';
import ProfileScreen from './screens/Profile';
import SettingsScreen from './screens/Settings';
import AquariumsScreen from './screens/Aquariums';
import GameScreen from './screens/Game';
import DrawerItems from './constants/DrawerItems';
import Header from './components/Header';
import {MaterialCommmunityIcons} from '@expo/vector-icons';
import {Feather} from '@expo/vector-icons';
import {FontAwesome5} from '@expo/vector-icons';


const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        drawerType='front'
        initialRouteName='Profile'
        drawerContentOptions={{
          activeTintColor: '#e91e63',
          itemStyle: {marginVertical: 10},
        }}
        >
          {
            DrawerItems.map(drawer=><Drawer.Screen
              key={drawer.name}
              name = {drawer.name}
              options = {{
                drawerIcon:({focused})=> (
                  drawer.iconType ==='Material'?
                  <MaterialCommmunityIcons
                    name = {drawer.iconName}
                    size = {24}
                    color = {focused ? "e91e63" : "black"}
                />
              :
              (
              drawer.iconType==='Feather'?
                <Feather
                  name = {drawer.iconName}
                  size = {24}
                  color = {focused ? '#e91e63' : 'black'}
                />
              :
                <FontAwesome5
                  name = {drawer.iconName}
                  size = {24}
                  color = {focused ? '#e91e63' : 'black'}
                />
                )
                )
              ,
                  headerShown: true,
                  header: ({scene})=>{
                    const {options} = scene.descriptor;
                    const title = 
                      options.headerTitle !== undefined
                        ? options.headerTitle
                        : options.title !== undefined
                        ? options.title
                        : scene.route.name;
                    
                    return (
                      <Header  screen = {title}/>
                    );
                  }
                }}
              component = {
                drawer.name === 'Profile' ? ProfileScreen
                  : drawer.name === 'Settings' ? SettingsScreen
                    : drawer.name === 'Aquariums' ? AquariumsScreen
                      : GameScreen
              }


              />)
          }
        </Drawer.Navigator>
      </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

这是我的 DrawerItems.js：

export default [
    {
        name: 'Profile',
        iconType: 'Material',
        iconName: 'face-profile',
    },
    {
        name: 'Settings',
        iconType: 'Material',
        iconName: "settings"
    },
    {
        name: 'Aquariums',
        iconType: 'Material',
        iconName: 'bookmark-check-outline'
    },
    {
        name: 'Game Screen',
        iconType: 'FontAwesome5',
        iconName: 'user-friends'
    }
]

这是终端中的错误信息：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `DrawerItem`.

This error is located at:
    in RCTView (at View.js:34)
    in View (at DrawerItem.tsx:127)
    in RNGestureHandlerButton (at createNativeWrapper.tsx:66)
    in NativeViewGestureHandler (at createNativeWrapper.tsx:62)
    in ComponentWrapper (at GestureButtons.tsx:106)
    in BaseButton (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at TouchableItem.ios.tsx:41)
    in TouchableItem (at DrawerItem.tsx:120)
    in Touchable (at DrawerItem.tsx:170)
    in RCTView (at View.js:34)
    in View (at DrawerItem.tsx:165)
    in DrawerItem (at DrawerItemList.tsx:43)
    in DrawerItemList (at DrawerContent.tsx:9)
    in RCTScrollContentView (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)
    in ScrollView (at ScrollView.js:1286)
    in ScrollView (at DrawerContentScrollView.tsx:20)
    in DrawerContentScrollView (at DrawerContent.tsx:8)
    in DrawerContent (at DrawerView.tsx:76)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:448)
    in AnimatedComponent(View) (at createAnimatedComponent.js:459)
    in ForwardRef(AnimatedComponentWrapper) (at Drawer.tsx:675)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:448)
    in AnimatedComponent(View) (at createAnimatedComponent.js:459)
    in ForwardRef(AnimatedComponentWrapper) (at Drawer.tsx:608)
    in PanGestureHandler (at GestureHandlerNative.tsx:13)
    in PanGestureHandler (at Drawer.tsx:599)
    in DrawerView (at DrawerView.tsx:235)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:76)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
    in SafeAreaProviderCompat (at DrawerView.tsx:233)
    in RCTView (at View.js:34)
    in View (at DrawerView.tsx:232)
    in DrawerView (at createDrawerNavigator.tsx:47)
    in DrawerNavigator (at App.js:22)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:409)
    in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
    in ThemeProvider (at NavigationContainer.tsx:90)
    in ForwardRef(NavigationContainer) (at App.js:21)
    in App (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in DevAppContainer (at AppContainer.js:121)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)

编辑：从下面的答案中添加了额外的括号

Answer 1

对于这个三元，尝试为第二个块添加一个 ()：

(
                  drawer.iconType ==='Material'?
                  <MaterialCommmunityIcons
                    name = {drawer.iconName}
                    size = {24}
                    color = {focused ? "e91e63" : "black"}
                />
              :

              ( // from here
drawer.iconType==='Feather'?
                <Feather
                  name = {drawer.iconName}
                  size = {24}
                  color = {focused ? '#e91e63' : 'black'}
                />
              :
                <FontAwesome5
                  name = {drawer.iconName}
                  size = {24}
                  color = {focused ? '#e91e63' : 'black'}
                />
                 ) // to here
                )