React.jsx:type无效，应为字符串或类/函数，但得到:未定义

Question

我正在使用react native进行一个项目。在那我面临以下错误

(注意：我正在使用react native创建一个android应用程序，因为当我点击搜索栏时，我面临如下错误。请帮助我清除错误(

Warning: React.jsx: 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 `SearchedProduct`.
in SearchedProduct (created by ProductContainer)
in RCTView (created by View)
in View
in Unknown
in Box
in Container
in ProductContainer (created by App)
in RCTView (created by View)
in View (created by App)
in $dac019021ac61f1f$export$9f8ac96af4b1b2ae (created by NativeBaseProvider)
in ToastProvider (created by NativeBaseProvider)
in PortalProvider (created by NativeBaseProvider)
in HybridProvider (created by NativeBaseProvider)
in ResponsiveQueryProvider (created by NativeBaseProvider)  
in RNCSafeAreaProvider (created by SafeAreaProvider)        
in SafeAreaProvider (created by NativeBaseProvider)
in NativeBaseConfigProviderProvider (created by NativeBaseProvider)
in NativeBaseProvider (created by App)
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer

我在这里附上我的代码https://snack.expo.dev/@naheeda24/动物饲养市场。你能帮我解决这个错误吗

提前感谢

Answer 1

问题的根源位于CategoryFilter.js中。在此组件中，您使用的是native-base中的ListItem。native-base版本3.3.7中不存在此组件(我不知道它存在于哪个版本(。

然而，ListItem实际上只是带有一些额外填充的View。因此，您可以从react-native中删除ListItem并将其替换为View，然后添加所需的样式。

这是更新后的CategoryFilter.js。

import React from 'react';
import { StyleSheet, TouchableOpacity, ScrollView, View } from 'react-native';
import { Badge, Text} from 'native-base';
const CategoryFilter = (props) => {

return(
<ScrollView
bounces={true}
horizantal = {true}
style = {{ backgroundColor: "#f2f2f2" }}
>
<View style = {{ margin: 0, padding: 0, borderRadius: 0}}>
<TouchableOpacity
key={1}
// onPress{()}
>
<Badge
style={[styles.center, {margin: 5}]}
>
<Text style={{ color: 'white' }}>name</Text>
</Badge>
</TouchableOpacity>
</View>
</ScrollView>
)
}
const styles = StyleSheet.create({
center: {
justifyContent: 'center'
}
})
export default CategoryFilter;