如何修复 React Native 中的“错误：元素类型无效：..”错误？

Question

我是 React Native 的新手，想要构建一个涉及用户可以与之交互的地图的应用程序。我一直在关注这个video，看看如何在点击标记时将卡片放在地图上。我一直跟踪他的代码直到 15:55（减去任何涉及搜索栏或搜索栏下方“筹码”的内容 - 我不需要那个）。我不断遇到： 错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记从定义它的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查

MapScreen

的渲染方法。

此错误位于： 在 AIRGoogleMap（由 MapView 创建）中
在 MapView 中（由 MapScreen 创建）
在RCTView中（由View创建） ...（控制台继续显示此错误的更多地方）。

我在 Google 上查找了如何修复错误，并了解了有关默认导出与命名导出的更多信息。认为这就是问题所在，我把我的“标记”数组作为另一个文件的命名导出（导出常量标记）并将其全部添加到该文件中，看看是否可以修复它。即使我没有从自己的文件中导入，它也不起作用。然后我慢慢地回顾视频并注释掉我不需要的所有内容，直到时间戳 15:55，但这也不起作用。同样的错误仍然存在。

这是我的第一篇文章，我感谢我能得到的任何帮助！我希望我的代码不会太糟糕哈哈！ :)

这是我的代码：

import React, { useEffect } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Animated,
    Image,
    TouchableOpacity,
    Dimensions,
    Platform,
} from "react-native";
import MapView, { PROVIDER_GOOGLE } from "react-native-maps";

const Images = [
    { image: require('../../../assets/images/marker.png') },
    //...
];

const markers = [
    {
        coordinate: {
            latitude: 32.7755,
            longitude: 96.8089,
        },
        title: "Reunion Tower",
        description: "Good views",
        image: Images[0].image,
        rating: 4,
        reviews: 99,
    },
    //... (4 other markers I am editing out)
];

const { width, height } = Dimensions.get("window");
const CARD_HEIGHT = 220;
const CARD_WIDTH = width * 0.8;
const SPACING_FOR_CARD_INSET = width * 0.1 - 10;

const MapScreen = () => {
    const initialMapState = {
        markers,
        region: {
            latitude: 22.62938671242907,
            longitude: 88.4354486029795,
            latitudeDelta: 0.04864195044303443,
            longitudeDelta: 0.040142817690068,
        },
    };

    const [state, setState] = React.useState(initialMapState);

    const _map = React.useRef(null);
    const _scrollView = React.useRef(null);

    return (
        <View style={styles.container}>
            <MapView
                ref={_map}
                initialRegion={state.region}
                style={styles.container}
                provider={PROVIDER_GOOGLE}
            >
                {state.markers.map((marker, index) => {
                    return (
                        <MapView.Marker key={index} coordinate={marker.coordinate} onPress={(e) => onMarkerPress(e)}>
                            <Animated.View style={[styles.markerWrap]}>
                                <Animated.Image
                                    source={require('../../../assets/images/marker.png')}
                                    style={[styles.marker]}
                                    resizeMode="cover"
                                />
                            </Animated.View>
                        </MapView.Marker>
                    );
                })}
            </MapView>
            <Animated.ScrollView
                horizontal
                scrollEventThrottle={1}
                showsHorizontalScrollIndicator={false}
                style={styles.scrollView}
            >
                {state.markers.map((marker, index) => (
                    <View style={styles.card} key={index}>
                        <Image
                            source={marker.image}
                            style={styles.cardImage}
                            resizeMode="cover"
                        />
                        <View style={styles.textContent}>
                            <Text numberOfLines={1} style={styles.cardtitle}>{marker.title}</Text>
                            <Text numberOfLines={1} style={styles.cardDescription}>{marker.description}</Text>
                        </View>
                    </View>
                ))}
            </Animated.ScrollView>
        </View>
    );
};

export default MapScreen;

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    //...
});

Answer 1

我认为这个问题似乎与

PROVIDER_GOOGLE

库中

"react-native-maps"

的使用有关。当库设置不正确或缺少某些依赖项时，通常会出现此问题。

要解决此问题，请按照以下步骤操作：

1. 确保您已安装

   react-native-maps

   所需的依赖项。在项目目录中运行以下命令：

npm install react-native-maps
npx pod-install

如果您使用

yarn

，则可以使用

yarn add react-native-maps

代替

npm install

。

2. 安装包后，需要链接它。运行以下命令：

react-native link react-native-maps

3. 现在，您应该为

   react-native-maps

   正确配置 Android 和 iOS 项目。按照官方文档中的 Android 和 iOS 设置指南进行操作：https://github.com/react-native-maps/react-native-maps#installation

4. 对于 iOS，请确保提供访问用户位置所需的权限。将以下行添加到您的

   Info.plist

   文件中：

<key>NSLocationWhenInUseUsageDescription</key>
<string>Your location is required to show nearby places.</string>

将字符串替换为适合您的应用用途的消息。

5. 如果您使用的是 Android，请确保向您的

   AndroidManifest.xml

   文件添加必要的权限：

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

6. 完成设置后，重建您的项目：

react-native run-android
react-native run-ios

如果一切设置正确，错误应该得到解决，并且您的地图屏幕应该按预期工作。请记住连接物理设备或运行模拟器来测试地图功能。