React Native 检查'HomeScreen'的转译方法

2fjabf4q  于 2022-11-25  发布在  React
关注(0)|答案(2)|浏览(94)

元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件),但得到:您可能忘记了从定义组件的文件中导出组件,或者您可能混淆了默认导入和命名导入。
主屏幕代码

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
fzwojiic

fzwojiic1#

我在图标上花了很大的力气,但出现了一个错误:预期字符串...导出/导入出错...等。您必须在heroicons网站上搜索名称,因为它们不同:搜索图标=放大玻璃图标调整图标=调整垂直图标

jobtbby3

jobtbby32#

好吧,我是怎么解决这个问题的,用AdjustmentsVerticalIcon替换AdjustmentsIcon,你的bug应该被修复了。改变这个的原因是,如果你在HeroIcons网站上搜索图标,你输入AdjustmentsIcon,没有图标被过滤掉。他们显然把它改成了AdjustmentsVerticalIcon。

相关问题