React Native MapView 崩溃

React Native MapView Crashes

提问人:M. Surguli 提问时间:11/15/2023 最后编辑:M. Surguli 更新时间:11/16/2023 访问量:32

问:

当我构建android apk文件时,我的React Native MapView崩溃了,但是它在模拟器上平稳运行。

下面是我的地图视图代码:DeliveryScreen.js

import React, { useState, useEffect, useMemo } from 'react';
import { View, Text, SafeAreaView, TouchableOpacity} from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import MapView, { Marker, Polyline, PROVIDER_GOOGLE } from 'react-native-maps';
import { useNavigation } from '@react-navigation/native';
import { HomeIcon } from 'react-native-heroicons/solid';
import { selectRestaurant } from '../features/restaurantSlice';
import { resetBasket } from '../features/basketSlice';



const DeliveryScreen = () => {
  const navigation = useNavigation();
  const dispatch = useDispatch();
  const restaurant = useSelector(selectRestaurant);
  const [distance, setDistance] = useState('Calculating...');

  const homeLocation = { latitude: 52.50768847543942, longitude: 13.294998226071066 };

  const clearBasketAndReturnHome = () => {
    dispatch(resetBasket());
    navigation.navigate('Home');
  };

  const calculatedDistance = useMemo(() => {

      const earthRadius = 6371;
      const { lat, long } = restaurant;
      const { latitude, longitude } = homeLocation;

      const dLat = (latitude - lat) * (Math.PI / 180);
      const dLon = (longitude - long) * (Math.PI / 180);

      const a =
        Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(lat * (Math.PI / 180)) * Math.cos(latitude * (Math.PI / 180)) * Math.sin(dLon / 2) * Math.sin(dLon / 2);

      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
      return (earthRadius * c).toFixed(2) + ' km';
  }, [restaurant, homeLocation]);

  useEffect(() => {
    setDistance(calculatedDistance);
  }, [calculatedDistance]);

  return (
    <View style={{ flex: 1, backgroundColor: '#00CCBB' }}>
      <MapView
        provider={PROVIDER_GOOGLE}
        
        initialRegion={{
          latitude: restaurant.lat,
          longitude: restaurant.long,
          latitudeDelta: 0.05,
          longitudeDelta: 0.05,
        }}
        style={{ flex: 1, marginTop: -10, zIndex: 0 }}
      >
        <Polyline
          coordinates={[
            { latitude: restaurant.lat, longitude: restaurant.long },
            homeLocation,
          ]}
          strokeColor="#ee5253"
          strokeWidth={6}
        />
        <Marker coordinate={homeLocation} pinColor="#ee5253" />
        <Marker
          coordinate={{ latitude: restaurant.lat, longitude: restaurant.long }}
          title={restaurant.title}
          description={restaurant.short_description}
        />
      </MapView>

      <SafeAreaView style={{ backgroundColor: 'white', flexDirection: 'row', alignItems: 'center', paddingHorizontal: 10, height: 130 }}>
        <View>
          <Text style={{ fontSize: 14, color: 'gray', paddingLeft: 5 }}>Distance to Restaurant</Text>
          <Text style={{ fontSize: 18, fontWeight: 'bold', paddingLeft: 5 }}>{distance}</Text>
        </View>
        <TouchableOpacity onPress={clearBasketAndReturnHome} style={{ right: -45, padding: 12, backgroundColor: '#34D399', borderRadius: 999, zIndex: 50 }}>
          <HomeIcon size={20} color='#FFFFFF' />
        </TouchableOpacity>
      </SafeAreaView>
    </View>
  );
};

export default React.memo(DeliveryScreen);

来自 Logcat 的错误

Failed to send network request CDP event                                              

okhttp3.internal.http2.StreamResetException: stream was reset: CANCEL

at okhttp3.internal.http2.Http2Stream$FramingSource.read(Http2Stream.kt:63)

at okhttp3.internal.connection.Exchange$ResponseBodySource.read(Exchange.kt:16)

at okio.x.read(RealBufferedSource.kt:6)

at okio.l.read(ForwardingSource.kt:8)

at abi49_0_0.com.facebook.react.modules.network.ProgressResponseBody$1.read(ProgressResponseBody.java:1)

at okio.x.w0(RealBufferedSource.kt:36)

at okio.v.read(PeekSource.kt:56)

at okio.x.w0(RealBufferedSource.kt:36)

at okhttp3.Response.peekBody(Response.kt:19)

at abi49_0_0.expo.modules.kotlin.devtools.ExpoRequestCdpInterceptor.didReceiveResponse(ExpoRequestCdpInterceptor.kt:62)

at abi49_0_0.expo.modules.kotlin.devtools.ExpoNetworkInspectOkHttpNetworkInterceptor.intercept(ExpoNetworkInspectOkHttpInterceptors.kt:82)

at java.lang.reflect.Method.invoke(Native Method)

at host.exp.exponent.b.g(RNObject.kt:30)

at host.exp.exponent.b.h(RNObject.kt:19)

at as.d0.f(KernelNetworkInterceptor.kt:19)

at as.d0.b(KernelNetworkInterceptor.kt:1)

at as.c0.intercept(R8$$SyntheticClass:1)

at okhttp3.internal.http.RealInterceptorChain.proceed(RealInterceptorChain.kt:167)

at okhttp3.internal.connection.ConnectInterceptor.intercept(ConnectInterceptor.kt:33)

at okhttp3.internal.http.RealInterceptorChain.proceed(RealInterceptorChain.kt:167)

at okhttp3.internal.cache.CacheInterceptor.intercept(CacheInterceptor.kt:192)

at okhttp3.internal.http.RealInterceptorChain.proceed(RealInterceptorChain.kt:167)

at okhttp3.internal.http.BridgeInterceptor.intercept(BridgeInterceptor.kt:171)

at okhttp3.internal.http.RealInterceptorChain.proceed(RealInterceptorChain.kt:167)

at okhttp3.internal.http.RetryAndFollowUpInterceptor.intercept(RetryAndFollowUpInterceptor.kt:35)

at okhttp3.internal.http.RealInterceptorChain.proceed(RealInterceptorChain.kt:167)

at abi49_0_0.expo.modules.kotlin.devtools.ExpoNetworkInspectOkHttpAppInterceptor.intercept(ExpoNetworkInspectOkHttpInterceptors.kt:29)

at java.lang.reflect.Method.invoke(Native Method)

at host.exp.exponent.b.g(RNObject.kt:30)

at host.exp.exponent.b.h(RNObject.kt:19)

at as.d0.e(KernelNetworkInterceptor.kt:19)

at as.d0.a(KernelNetworkInterceptor.kt:1)

at as.b0.intercept(R8$$SyntheticClass:1)

at okhttp3.internal.http.RealInterceptorChain.proceed(RealInterceptorChain.kt:167)

at okhttp3.internal.connection.RealCall.getResponseWithInterceptorChain$okhttp(RealCall.kt:118)

at okhttp3.internal.connection.RealCall$AsyncCall.run(RealCall.kt:52)

at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1145)

at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:644)

at java.lang.Thread.run(Thread.java:1012)

代码在模拟器上流畅运行,但是当我构建 APK 文件时,当它到达地图时,应用程序崩溃并退出。

请提供任何帮助将不胜感激。

javascript reactjs react-native google-maps github

评论

0赞 Yrll 11/24/2023
您在 logcat 上看到的任何其他错误?我在堆栈跟踪中看不到与 Maps SDK 相关的任何内容。

答: 暂无答案