渲染错误，元素类型无效：需要一个字符串（对于内置组件）

Question

渲染错误，元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记导出组件。

在我使用了 React-native-elements 中的 List 和 ListItem 之后，我得到了这个错误。

import React ,{ useState,useEffect } from 'react';
import { Text, View,SafeAreaView,StyleSheet,TextInput,
Button,Alert,Image,FlatList} from 'react-native';
import {List,ListItem} from 'react-native-elements';
import Api from '../../../server/routes/userApi'

const Users = () => {
  
  const [usersData, setUsersData] = useState([])
  let api=new Api()

 const fetchData=async()=>{
   const users=await api.getUsers()
   console.log("users ",users)
  setUsersData(users)
 }
  useEffect(()=>{
    fetchData()
  },[])
return (
  <List>
    <FlatList
    data={usersData}
    renderItem={({item})=>(
      <ListItem
        roundAvatar
        title={`${item.firstName}`}
      />
    )}
    keyExtractor={item => item.id}
  />
  </List>
  )
}

export default Users;

Answer 1

您正在使用 react-native-elements 自版本以来不再提供 List 组件1.0。

官方文档中提到了这一点。

列表组件已被删除！列表只是一个常规的 React Native 视图，带有一些小边距样式。实际上并不需要使用 ListItem 组件。相反，我们建议使用 React Native 中的 FlatList 或 SectionList 组件，它们既可以用作视图，也可以显示项目、拉动刷新等。

因此，导入语句

import {List, ListItem} from 'react-native-elements'

不起作用，因为 List 不存在。

只需将 List 组件替换为 View，根据需要设置必要的边距或其他样式，然后删除 List 的导入即可。由于您已经在使用 FlatList 和 ListItem 这应该可以工作。