提问人:M. Surguli 提问时间:11/15/2023 最后编辑:M. Surguli 更新时间:11/16/2023 访问量:32
React Native MapView 崩溃
React Native MapView Crashes
问:
当我构建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 文件时,当它到达地图时,应用程序崩溃并退出。
请提供任何帮助将不胜感激。
答: 暂无答案
评论