javascript - 世博会无缘无故崩溃
问题描述
我在这里有一个项目,使用 Expo 管理的工作流程。当我在我的物理设备上运行它时,它只是崩溃并显示“不幸的是 Expo 已停止”。崩溃发生在 MapScreen.js 文件中。我使用->
- 反应本机地图
- 展览地点
- 反应本机地图方向
- 反应本机模式
- lottie-react-native
- 反应本机路由器通量
- 火力基地
单击按钮时出现错误(请在下面找到代码)
MapScreen.js
import React, { useState, useEffect } from "react";
import { StatusBar } from "expo-status-bar";
import {
Button,
Dimensions,
Image,
StyleSheet,
Text,
View,
} from "react-native";
import { Poppins_400Regular, useFonts } from "@expo-google-fonts/poppins";
import MapView, { Marker } from "react-native-maps";
import * as Location from "expo-location";
import MapViewDirections from "react-native-maps-directions";
import Modal from "react-native-modal";
import LottieView from "lottie-react-native";
import { Actions } from "react-native-router-flux";
import { firebase } from "../functions/firebase";
const deviceWidth = Dimensions.get("window").width;
const deviceHeight = Dimensions.get("window").height;
const MapScreen = ({ longitude, latitude, searchResult }) => {
let [fontsLoaded] = useFonts({
Poppins_400Regular,
});
const [errorMsg, setErrorMsg] = useState(null);
const [mapRegion, setmapRegion] = useState(null);
const [customMark, setcustomMark] = useState(null);
const [modal0Show, setmodal0Show] = useState(true);
const [modal1Show, setmodal1Show] = useState(false);
const [didAccept, setdidAccept] = useState(false);
const apikey = "xxxxxxxxxxxxxxxxxxxxxxxxxx";
useEffect(() => {
(async () => {
let { status } = await Location.requestPermissionsAsync();
if (status !== "granted") {
setErrorMsg("Permission to access location was denied");
}
if (status === "granted") {
let location = await Location.getCurrentPositionAsync({});
setmapRegion({
longitude: location.coords.longitude,
latitude: location.coords.latitude,
longitudeDelta: 3,
latitudeDelta: 3,
});
}
})();
}, []);
useEffect(() => {
if (mapRegion) {
setcustomMark({ latitude: latitude, longitude: longitude });
}
}, [mapRegion]);
useEffect(() => {
if (errorMsg) {
console.log("err " + errorMsg);
}
}, [errorMsg]);
function modalHideShow() {
setmodal0Show(false);
setmodal1Show(true);
searchForDriver();
searchForUpdates();
}
function searchForDriver() {
firebase
.database()
.ref("beforePick/")
.set({
searchForDriver: true,
})
.catch((err) => {
setErrorMsg(err);
});
}
function searchForUpdates() {
firebase
.database()
.ref("beforePick/")
.on("value", (snapshot) => {
if (snapshot.val().searchForDriver === false) {
setmodal0Show(false);
setdidAccept(true);
setmodal1Show(false);
Actions.push("lobby");
}
});
}
return (
<View style={styles.container}>
{fontsLoaded && (
<View>
<StatusBar hidden={true} />
{modal1Show === false && (
<MapView initialRegion={mapRegion} style={styles.mapView}>
{customMark && (
<MapViewDirections
origin={{
latitude: mapRegion.latitude,
longitude: mapRegion.longitude,
}}
destination={{
latitude: customMark.latitude,
longitude: customMark.longitude,
}}
apikey={apikey}
strokeWidth={3}
strokeColor="hotpink"
/>
)}
{mapRegion && (
<Marker coordinate={mapRegion} title="Me" description="Myself">
<Image
source={require("../images/155-1551908_open-google-current-location-icon.png")}
style={styles.currentLocationIcon}
/>
</Marker>
)}
{customMark && <Marker coordinate={customMark}></Marker>}
</MapView>
)}
{modal0Show && (
<View
style={{
position: "absolute",
top: deviceHeight - 100,
height: "auto",
backgroundColor: "white",
width: "100%",
}}
>
<Text style={styles.modalText0}>
{searchResult.address_components[0].long_name}
</Text>
<Text style={styles.modalText1}>
{searchResult.formatted_address}
</Text>
<Button
title="Get Driver !"
style={styles.modalButton0}
onPress={modalHideShow}
/>
</View>
)}
</View>
)}
<View>
{modal1Show === true && (
<View>
<Modal
deviceHeight={deviceHeight}
deviceWidth={deviceWidth}
isVisible={modal1Show}
backdropColor="#B4B3DB"
backdropOpacity={0.8}
animationIn="zoomInDown"
animationOut="zoomOutUp"
animationInTiming={600}
animationOutTiming={600}
backdropTransitionInTiming={600}
backdropTransitionOutTiming={600}
>
<View style={styles.modal1Container1}>
<LottieView
style={{
width: 40,
height: 40,
}}
source={require("../images/14717-sedan-car-animation.json")}
autoPlay
loop
/>
<Text>Looking for Driver...</Text>
</View>
</Modal>
</View>
)}
</View>
</View>
);
};
这是按钮部分->
{modal0Show && (
<View
style={{
position: "absolute",
top: deviceHeight - 100,
height: "auto",
backgroundColor: "white",
width: "100%",
}}
>
<Text style={styles.modalText0}>
{searchResult.address_components[0].long_name}
</Text>
<Text style={styles.modalText1}>
{searchResult.formatted_address}
</Text>
<Button
title="Get Driver !"
style={styles.modalButton0}
onPress={modalHideShow}
/>
</View>
)}
知道为什么会这样吗?
谢谢 !
解决方案
我以前也遇到过同样的问题,这是我的代码的一部分,它只适用于 IOS 而不是 Andriod,它给了我同样的错误。删除那部分代码修复了它。我不能确切地告诉你是什么原因造成的,但我会检查代码的每个部分,检查是什么原因造成的。
推荐阅读
- asp.net - MVC - 如果我们再次打开,则在下拉列表中显示先前选择的值作为顶部/第一项
- python - 在 python 中,是否可以在协程任务的新线程中启动方法?
- javascript - 如何使用具有 ES6 标准的 vuejs 转换以下 JavaScript 逻辑
- javascript - 当 Div 名称不唯一时,使用 jQuery 从 Div 中获取文本
- excel - Excel 如果有 3 个值
- angular - 无法安装角度 cli
- python-3.x - Python:在 For 循环中使用 if else 的折扣程序
- node.js - 与 express 中的查询字符串的精确路由匹配
- flutter - 如何在 Flutter 中选中/取消选中有状态子 WIdget 中的复选框?
- html - 无论我做什么,CSS Grid 布局都无法让布局按照我想要的方式运行