React Native报错：元素类型无效，检查HomeScreen渲染问题

错误描述 #

运行React Native项目时，HomeScreen组件抛出以下错误：

Error: Element type is invalid: expected a string (for built-in components) or a class/function but got: undefined

提示需检查HomeScreen的render方法。

问题原因及修复方案 #

1. App.js存在重复导出 #

App.js末尾重复编写了两次export default App，导致模块导出异常，React无法正确识别根组件。

修复：删除其中一个导出语句，保留唯一导出：

import React from 'react';
import { StyleSheet, View } from 'react-native'
import { colors, parameters } from './src/global/styles'
import HomeScreen from './src/screens/HomeScreen';

const App = () => {
  return(
    <View style={styles.container}>
      <HomeScreen/>
    </View>
  )
} 

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor:colors.white,
    paddingBottom: 30
  }
})

export default App 

2. useEffect依赖数组语法错误 #

HomeScreen.js中useEffect的写法存在语法错误，依赖数组位置错误：

// 错误写法
useEffect(()=>{
    checkPermission();
    getLocation()
,[]})

修复：将依赖数组移到回调函数的括号外：

// 正确写法
useEffect(()=>{
    checkPermission();
    getLocation()
    // console.log(latlng)
},[])

该语法错误会导致组件渲染逻辑异常，进而触发元素类型错误。

3. MapView.Marker未正确导入 #

使用<MapView.Marker>但未显式导入Marker组件，部分react-native-maps版本无法识别这种嵌套写法。

修复：修改MapView的导入语句，显式导入Marker：

import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps'; 

同时将render中的<MapView.Marker>替换为<Marker>：

{
  carsAround.map((item,index) =>
  <Marker coordinate={item} key={index.toString()}>
    <Image
      source={require('../../assets/carMarker.png')}
      style={styles.carsAround}
      resizeMode="cover"
    />
  </Marker>
  )
}

4. FlatList使用无效属性numRows #

FlatList组件没有numRows属性，该属性是ListView的遗留属性，FlatList中垂直布局使用numColumns，而水平布局下该属性完全无效，会导致FlatList渲染异常。

修复：删除FlatList的numRows={4}属性：

<FlatList 
    horizontal={true}
    showsHorizontalScrollIndicator={false}
    data={filterData}
    keyExtractor={(item) => item.id}
    renderItem={({item}) => (
        <View style={styles.card}>
            <View style={styles.view2}>
                <Image style={styles.image2} source={item.image}/>
            </View>
            <View>
                <Text style={styles.title}>{item.name}</Text>
            </View>
        </View>
    )}
/>

总结 #

按顺序修复以上四个问题后，即可解决当前的元素类型错误。

内容的提问来源于stack exchange，提问作者Aldrin Bumiltac