从一个屏幕导航到另一个屏幕时出现跟随错误
E/unknown:ReactNative: TypeError: undefined is not a function
This error is located at:
in F
in Unknown
in Unknown
in Unknown
in RCTView
in Unknown
in RCTView
in Unknown
in RCTView
in Unknown
in Unknown
in RCTView
in Unknown
in k
in Unknown
in PanGestureHandler
in Unknown
in RCTView
in Unknown
in k
in Unknown
in RCTView
in Unknown
in T
in Unknown
in RNSScreen
in k
in Unknown
in o
in Suspense
in Unknown
in q
in l
in s
in Unknown
in RNSScreenContainer
in ScreenContainer
in Unknown
in RCTView
in Unknown
in Unknown
in R
in RNCSafeAreaProvider
in Unknown
in p
in RNGestureHandlerRootView
in Unknown
in S
in Unknown
in u
in Unknown
in Unknown
in Unknown
in Unknown
in Unknown
in Unknown
in Unknown
in Unknown
in RCTView
in Unknown
in RCTView
in Unknown
in y, js engine: hermes, stack:
anonymous@1107:14081
F@1107:13345
Cr@48:43504
Rl@48:55175
Sa@48:96772
vi@48:86899
gi@48:86801
hi@48:86566
oi@48:83486
pt@48:27332
Za@48:79770
al@48:49088
anonymous@562:465
anonymous@598:1424
anonymous@610:748
t@609:296
O@606:521
anonymous@606:750
j@606:575
anonymous@606:730
anonymous@800:9550
tryCallOne@53:15
anonymous@139:26
anonymous@79:1661
k@79:497
w@79:887
callReactNativeMicrotasks@79:3054
value@33:2867
anonymous@33:959
value@33:2503
value@33:918
value@33:853
以上错误在android studio中显示，而在物理设备上运行调试apk。
我的主要问题是我无法理解错误在哪里。
下面是我的代码。
import React, { useState, useEffect, useRef } from 'react';
import { View, Text, Image, StyleSheet, StatusBar, SafeAreaView, TouchableWithoutFeedback, TouchableOpacity, Dimensions, TextInput, Animated, ScrollView, FlatList, Linking } from 'react-native';
import { ListItem, Avatar, CheckBox } from 'react-native-elements'
import MapView, { PROVIDER_GOOGLE, Polygon, Marker, LatLng, mapStyle, Polyline, enableLatestRenderer } from 'react-native-maps';
import { useNavigation, useRoute } from '@react-navigation/native';
import MapViewDirections from 'react-native-maps-directions';
import { SvgUri } from 'react-native-svg';
import axios from 'axios';
const API_KEY = 'Key';
enableLatestRenderer();
const PlanewTripmain = ({ navigation: { goBack } }) => {
const route = useRoute();
const [start_latlng, setstart_latlng] = useState('');
const [end_latlng, setend_latlng] = useState('');
const [checked, setChecked] = useState([]);
const [selected, SetSelected] = useState(false)
const [LoginData, setLoginData] = useState([]);
const [TripData, setTripData] = useState(null)
const [Markerer, setMarker] = useState([])
const [locations, setlocations] = useState()
const [Pharmacydetaillist, setPharmacydetaillist] = useState([])
const ref = React.useRef();
const navigation = useNavigation()
const [checkedItems, setCheckedItems] = useState([]);
const myTheme = {
roundness: 4,
colors: {
primary: '#369B5F',
accent: '#D9D9D9',
},
};
const pharmacylist = []
useEffect(() => {
route.params.responseJson[0].data.map((item) => {
//
const data = { "latitude": parseFloat(item.ph_LatLong.split(',')[0]), "longitude": parseFloat(item.ph_LatLong.split(',')[1]) }
polygons.push(data);
const datapList = { ...item, checked: false }
pharmacylist.push(datapList)
});
})
useEffect(() => {
setLoginData(route.params.LoginData.data[0])
setTripData(route.params.responseJson);
setMarker(polygons);
setPharmacydetaillist(pharmacylist)
}, [])
const MyStatusBar = ({ backgroundColor, ...props }) => (
<View style={[styles.statusBar, { backgroundColor }]}>
<SafeAreaView>
<StatusBar translucent backgroundColor={backgroundColor} {...props} />
</SafeAreaView>
</View>
);
const polygons = []
const origin = {
latitude: 41.878114,
longitude: -87.6297778,
};
const destination = {
latitude: 38.6268888,
longitude: -90.1989143,
}
const [checkboxes, setCheckboxes] = useState({
option1: false,
option2: false,
option3: false,
option4: false
});
const handleCheckboxChange = (item) => {
if (checkedItems.includes(item)) {
setCheckedItems(checkedItems.filter((i) => i !== item));
} else {
setCheckedItems([...checkedItems, item]);
}
}
const startTrip = async (actionType) => {
console.log('Start Trip clicked')
const npidata = checkedItems.map((item) => {
return item.ph_NPI;
})
const bodyData = { "start_loc": route.params.responseJson[0].tripdetails[0].startAddress, "end_loc": route.params.responseJson[0].tripdetails[0].endAddress, "start_latlng": route.params.responseJson[1].start_latlng, "end_latlng": route.params.responseJson[1].end_latlng, "trip_name": route.params.responseJson[0].tripdetails[0].tripName, "ph_npi": npidata.join(), "trip_flag": actionType };
fetch(`Api url`, {
method: 'POST',
body: JSON.stringify(bodyData),
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${route.params.LoginData.data[0].token}`
}
})
.then((response) => response.json())
.then((responseJson) => {
GetstartTripdetail(responseJson[0].objectUid)
})
.catch((error) => {
console.error(error);
});
};
const GetstartTripdetail = async (objectUid) => {
console.log('GetstartTripdetail clicked')
const bodyDataa = { "objectUid": objectUid };
fetch(`Api url`, {
method: 'POST',
body: JSON.stringify(bodyDataa),
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${route.params.LoginData.data[0].token}`
}
})
.then((response) => response.json())
.then((responseJson) => {
const points = responseJson[0].pharmacies.map((item) => {
return { latitude: parseFloat(item.ph_LatLong.split(',')[0]), "longitude": parseFloat(item.ph_LatLong.split(',')[1]) }
})
const origin = { latitude: responseJson[0].startLatLong.split(",")[0], longitude: responseJson[0].startLatLong.split(",")[1] };
const destination = { latitude: responseJson[0].endLatLong.split(",")[0], longitude: responseJson[0].endLatLong.split(",")[1] };
const waypoints = points;
debugger;
navigation.navigate('TripDetail', { responseJson, LoginData })
openMapWithRoute(origin, destination, waypoints);
})
.catch((error) => {
console.error(error);
});
};
const openMapWithRoute = (origin, destination, waypoints) => {
let waypointsString = '';
waypoints.forEach((waypoint) => {
waypointsString += `${waypoint.latitude},${waypoint.longitude}|`;
});
waypointsString = waypointsString.slice(0, -1);
const url = `https://www.google.com/maps/dir/?api=1&origin=${origin.latitude},${origin.longitude}&destination=${destination.latitude},${destination.longitude}&waypoints=${waypointsString}`;
Linking.canOpenURL(url).then(supported => {
if (supported) {
Linking.openURL(url);
} else {
console.log("Don't know how to open URI: " + url);
}
});
};
return (
<View style={[styles.containerPlanned]}>
<MyStatusBar backgroundColor="#2A524B" barStyle="light-content" />
{/* <View style={styles.appBar} /> */}
<View style={styles.headerarea}>
<TouchableWithoutFeedback onPress={() => goBack()}>
<Image
source={require('./assets/images/back_white.png')}
style={styles.menuicon}
/>
</TouchableWithoutFeedback>
<Text style={styles.ongoingtriptxt}>Plan a New Trip</Text>
</View>
{route.params.responseJson != null &&
<>
<View style={styles.MapArea}>
<MapView
provider={PROVIDER_GOOGLE}
style={styles.map}
initialRegion={{
latitude: route.params.responseJson[0].polygonBoundries[5].latitude,
longitude: route.params.responseJson[0].polygonBoundries[5].longitude,
latitudeDelta: 1,
longitudeDelta: 2 * (screenWidth / 291),
}}
>
{/* {locations.map(marker => ( */}
<Polygon
coordinates={route.params.responseJson[0].polygonBoundries}
strokeColor="#f00"
fillColor="rgba(255,0,0,0.2)"
strokeWidth={1}
zIndex={9}
/>
<MapViewDirections
origin={route.params.responseJson[0].tripdetails[0].startAddress}
destination={route.params.responseJson[0].tripdetails[0].endAddress}
apikey={API_KEY}
strokeWidth={1}
strokeColor="#111111"
mode="DRIVING"
/>
{/* ))
} */}
{Markerer.map((markerr, index) => (
<Marker key={index}
coordinate={markerr}
// style={{ width: 13, height: 20 }}
>
<View>
<Image source={require('./assets/images/location.png')}
style={styles.markericon}></Image>
</View>
</Marker>
))}
</MapView>
</View>
<View style={styles.foundpharmacyparent}>
<View style={styles.tripnameparent_box}>
<Text style={styles.tripname}>{route.params.responseJson[0].tripdetails[0].tripName}</Text>
<Text style={styles.editbtn}>Edit Details</Text>
</View>
<View >
<Text style={styles.triplocation}>{route.params.responseJson[0].tripdetails[0].startAddress} - {route.params.responseJson[0].tripdetails[0].endAddress}</Text>
</View>
<View style={styles.noofpharnamebox}>
<Text style={[styles.tripname, styles.size16]}>
{route.params.responseJson[0].tripdetails[0].pharmacyCount} Pharmacies found
</Text>
<TouchableWithoutFeedback>
<Image
source={require('./assets/images/filterbtn.png')}
style={styles.filterbtn}
/>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback>
<Image
source={require('./assets/images/sort_green.png')}
style={styles.menubtn}
/>
</TouchableWithoutFeedback>
</View>
<SafeAreaView>
<ScrollView style={[styles.scrollView, checkedItems.length >= 1 ? styles.scrollViewchecked : ""]}>
{Pharmacydetaillist.map((item, index) => (
<ListItem key={index + 'a'} style={styles.ListItem} containerStyle={{
paddingLeft: 8,
paddingRight: 0,
alignItems: 'flex-start',
backgroundColor: checkedItems.includes(item) ? '#EAF9F0' : 'white',
paddingBottom: 0
}}>
<CheckBox
value={checkedItems.includes(item)}
onValueChange={() => handleCheckboxChange(item)}
checked={checkedItems.includes(item)}
// containerStyle={styles.checkbox}
uncheckedIcon={<Image source={require('./assets/images/unchecked.png')} />}
checkedIcon={<Image source={require('./assets/images/checked.png')} />}
onPress={() => handleCheckboxChange(item)}
/>
{item.logo &&
<View style={styles.avatar}>
<SvgUri
uri={item.logo}
/>
</View>
}
{!item.logo &&
<View style={styles.avatarr}>
<Text style={styles.avatartxt}>{item.pharmacy_Name.split(" ")[0].at(0)}{item.pharmacy_Name.split(" ").slice(-1)[0].at(0)}</Text>
</View>
}
<ListItem.Content style={styles.listitemcontent}>
<View style={styles.Title_parent}>
<Text style={styles.Title}>
{item.pharmacy_Name}
</Text>
</View>
<View style={styles.subtitleView}>
<Text style={styles.from_to_location}>{item.pharmacy_Address}</Text>
<Text style={styles.no_of_visits}>{item.transactions} Transactions . {item.no_Of_Visits} Visits . {item.last_Visit_date}</Text>
</View>
<Text style={{ height: 1, width: "100%", backgroundColor: "#E8E8E8", marginTop: 15 }}></Text>
</ListItem.Content>
</ListItem>
))}
</ScrollView>
</SafeAreaView>
</View>
{checkedItems.length >= 1 &&
<View style={styles.SelectedParent}>
<Text style={styles.selecteditemsboxText}>
{checkedItems.length} Pharmacies Selected
</Text>
<View style={styles.selectedPharbtnParent}>
<TouchableOpacity style={styles.Selectedsavebtn} onPress={() => { startTrip('Created') }
}>
<Text style={styles.SelectedsavebtnText}>Save</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.Selectedstarttripbtn} onPress={() => { startTrip('Started') }
}>
<Text style={styles.SelectedstarttripText}>Start Trip</Text>
</TouchableOpacity>
</View>
</View>
}
</>
}
</View>
);
};
const STATUSBAR_HEIGHT = StatusBar.currentHeight;
const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56;
const screenWidth = Dimensions.get('window').width;
const screenHeight = Dimensions.get('window').height;
export default PlanewTripmain;
我在逐行检查代码后解决了这个问题。问题在这一行
<Text style={styles.avatartxt}>{item.pharmacy_Name.split(" ")[0].at(0)}{item.pharmacy_Name.split(" ").slice(-1)[0].at(0)}</Text>
似乎内联JS不支持React Native Android。