检查“HomeScreen”的呈现方法

Question

元素类型无效:预期为字符串(用于内置组件)或类/函数(用于组合组件)，但got:未定义。您可能忘记从定义在其中的文件中导出组件，或者您可能混淆了默认导入和命名导入。

HomeScreen代码

import {
  View,
  Text,
  SafeAreaView,
  Image,
  TextInput,
  ScrollView,
} from "react-native";
import React, { useLayoutEffect } from "react";
import { useNavigation } from "@react-navigation/native";
import {
  UserIcon,
  ChevronDownIcon,
  SearchIcon,
  AdjustmentsIcon,
} from "react-native-heroicons/outline";
import Categories from "../components/Categories";

const HomeScreen = () => {
  const navigation = useNavigation();

  useLayoutEffect(() => {
    navigation.setOptions({
      headerShown: false,
    });
  }, []);

  return (
    <SafeAreaView className="bg-white pt-5 flex-col">
      {/* Header */}
      <View className="flex-row pb-3 items-center mx-4 space-x-2 px-4">
        <Image
          source={{
            url: "https://links.papareact.com/wru",
          }}
          className="h-7 w-7 bg-gray-300 p-4 rounded-full"
        />
        <View className="flex-1">
          <Text className="font-bold text-gray-400 text-xs">Deliver Now !</Text>
          <Text className="font-bold text-xl">
            Current Location
            <ChevronDownIcon size={20} color="#00cc88" />
          </Text>
        </View>

        <UserIcon size={35} color="#00cc88" />
      </View>

      {/* Search */}
      <View className="flex-row items-center space-x-2 pb-2 mx-4 ">
        <View className="flex-row flex-1 space-x-2 bg-gray-200 p-3">
          <SearchIcon color="gray" size={20} />
          <TextInput
            placeholder="Restros and Cuisines"
            keyboardType="default"
          />
        </View>

        <AdjustmentsIcon color="#00cc88" />
      </View>

      {/* Body */}
      <ScrollView
        className="bg-gray-100"
        contentContainerStyle={{
          paddingBottom: 100,
        }}
      >
        {/* Categories */}
        <Categories />
        {/* Featured Rows */}
      </ScrollView>
    </SafeAreaView>
  );
};

export default HomeScreen;

我不知道我特别错误地进口或出口了什么。请帮帮我

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

const Categories = () => {`enter code here`
  return (
    <View>
      <Text>Categories</Text>
    </View>
  )
}

export default Categories

Answer 1

与图标搏斗，得到了一个错误:期望导出/导入出现string...something错误.等等。你必须在英雄主义者的网站上搜索他们的名字，因为他们是不同的: SearchIcon = MagnifyingGlassIcon AdjustmentsIcon = AdjustmentsVerticalIcon

Answer 2

好的，所以我解决这个问题的方法是，用AdjustmentsVerticalIcon替换AdjustmentsVerticalIcon，您的bug应该是修复的。更改的原因是，如果您搜索HeroIcons网站上的图标，然后键入AdjustmentsIcon，则不会筛选出任何图标。显然他们把它改成了AdjustmentsVerticalIcon。