Привет, ребята. Я сделал заголовок прозрачным (я использую стековый навигатор) и расположил кнопку с каждой стороны. Местоположение меняется всякий раз, когда пользователи щелкают новое местоположение на карте.
Однако, когда я нажимаю кнопку «плюс» или расположение кнопки списка, местоположение также изменяется. Таким образом, местоположение пользователя меняется, когда я нажимаю на эту кнопку Мне нужно решить эту проблему .....
Это мой код
import React from 'react';
import { StyleSheet, View, Text, Dimensions, Image } from 'react-native';
import MapView, { PROVIDER_GOOGLE, Marker, Callout, Circle } from 'react-native-maps';
import { COLOR, MARKER, CAT_MARKER } from '../constants'
const HomeScreen = ({ location, nearCat, onPresshandler, navigation, getClickedCatData }) => {
const callOutClickHandler = (index) => {
getClickedCatData(index);
navigation.navigate('Detail', {
index,
});
};
return (
<View style={styles.container}>
<MapView
onPress={onPresshandler}
provider={PROVIDER_GOOGLE}
style={styles.map}
region={{
latitude: location.latitude,
longitude: location.longitude,
latitudeDelta: 0.011,
longitudeDelta: 0.011,
}}
>
<Circle
center = {{ latitude: location.latitude, longitude: location.longitude }}
radius = {500}
fillColor={COLOR.circle}
/>
<Marker
coordinate={{ latitude: location.latitude, longitude: location.longitude }}
>
<View style={styles.markerBox}>
<Text style={styles.pinText}>현재위치</Text>
<Image
style={styles.image}
source={{
uri: MARKER
}}
/>
</View>
</Marker>
{nearCat.map((cat, i) => (
<Marker
key={cat._id + Math.random()}
coordinate={{
latitude: Number(cat.location[0]),
longitude: Number(cat.location[1])
}}
>
<View style={styles.markerBox}>
<Image
style={styles.image}
source={{
uri: CAT_MARKER
}}
/>
</View>
<Callout onPress={() => callOutClickHandler(i)}>
<Text>{cat.name}</Text>
</Callout>
</Marker>
))}
</MapView>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
map: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
markerBox: {
alignItems: 'center',
justifyContent: 'center',
width: '100%',
},
pinText: {
color: 'black',
fontWeight: 'bold',
textAlign: 'center',
fontSize: 20,
},
image: {
width: 40,
height: 40,
},
callOut: {
flex: -1,
width: '100%',
backgroundColor: 'white',
borderRadius: 50,
padding: 10,
shadowColor: "red",
shadowOffset: {
width: 0,
height: 8,
},
shadowOpacity: 0.46,
shadowRadius: 11.14,
},
});
export default HomeScreen;