时间戳

首页 > 解决方案 > React Native 中的“NSCFBoolean objectForKeyedSubscript:]：无法识别的选择器发送到实例”

react-native - React Native 中的“NSCFBoolean objectForKeyedSubscript:]：无法识别的选择器发送到实例”

问题描述

我将 React Native 与 Expo 一起使用，这最初是一个基于类的组件，但我将其转换为功能组件，因为我想使用钩子。现在它正在引发屏幕截图中显示的错误。我不确定如何处理该错误？我已经看到另一篇关于此的帖子，但有点失落（我正在练习反应）。该组件基本上是一个带标记的 GPS！谢谢

在此处输入图像描述

import { View, Text, Animated, StyleSheet } from "react-native";
import MapView, { Marker, PROVIDER_GOOGLE } from "react-native-maps";
import React, { Component, useState } from "react";
import { MaterialCommunityIcons } from "react-native-vector-icons";

const LATITUDE = 18.7934829;
const LONGITUDE = 98.9867401;
const LATITUDE_DELTA = 0.009;
const LONGITUDE_DELTA = 0.009;

export default function MapLocation() {
  const [location, setLocation] = useState({
    isLoading: true,
    latitude: LATITUDE,
    longitude: LONGITUDE,
    error: null,
  });

  var getMapRegion = () => ({
    latitude: location.latitude,
    longitude: location.longitude,
    latitudeDelta: LATITUDE_DELTA,
    longitudeDelta: LONGITUDE_DELTA,
  });

  navigator.geolocation.getCurrentPosition(
    (position) => {
      console.log(position);
      setLocation({
        latitude: position.coords.latitude,
        longitude: position.coords.longitude,
        error: null,
      });
    },
    (error) => setLocation({ error: error.message }),
    { enableHighAccuracy: false, timeout: 200000, maximumAge: 1000 }
  );

  navigator.geolocation.watchPosition((position) => {
    const { latitude, longitude } = position.coords;
    setLocation({ latitude, longitude });
  });

  const { isLoading } = location;

  return (
    <View style={{ flex: 1 }}>
      <MapView
        style={{ flex: 1 }}
        provider={PROVIDER_GOOGLE}
        region={getMapRegion}
        showsUserLocation={true}
        showsMyLocationButton={true}
      >
        <Marker coordinate={getMapRegion}>
          <MaterialCommunityIcons name="egg" color={"white"} size={35} style={styles.shadow} />
        </Marker>

        <Marker
          coordinate={{ latitude: 34.0198536, longitude: -80.923467 }}
          pinColor="maroon"
          title={"title"}
          description={"description"}
        >
          <MaterialCommunityIcons name="school" color={"maroon"} size={40} style={styles.shadow} />
        </Marker>
      </MapView>
    </View>
  );
}

const styles = StyleSheet.create({
  shadow: {
    // transform: [{ rotateZ: "10deg" }],
    shadowColor: "black",
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.5,
    shadowRadius: 2,
    elevation: 3,
  },
});

标签： react-nativeexceptioncompiler-errorsexpouse-state

解决方案

我使用 useState 和 useEffect 转换为钩子时遇到了几个问题。我通过本指南解决了这两个问题，关于将类转换为函数。我没有使用“useEffect hook”代替组件确实挂载，我也没有在 useEffect hook 末尾有一个空数组，这使得它根据我的理解不断重新渲染。

链接到功能组件转换步骤

推荐阅读