-
질문 & 답변
카테고리
-
세부 분야
모바일 앱 개발
-
해결 여부
해결됨
react-native-vector-icons 에러 관련 질문
24.05.04 21:29 작성 조회수 88
1
import React, {useRef, useState} from 'react';
import {Alert, Pressable, StyleSheet, View} from 'react-native';
import MapView, {
Callout,
LatLng,
LongPressEvent,
Marker,
PROVIDER_GOOGLE,
} from 'react-native-maps';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import Ionicons from 'react-native-vector-icons/Ionicons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import {StackNavigationProp} from '@react-navigation/stack';
import {alerts, colors, mapNavigations} from '@/constants';
import {CompositeNavigationProp, useNavigation} from '@react-navigation/native';
import {DrawerNavigationProp} from '@react-navigation/drawer';
import {MainDrawerParamList} from '@/navigations/drawer/MainDrawerNavigator';
import {MapStackParamList} from '@/navigations/stack/MapStackNavigator';
import useUserLocation from '@/hooks/useUserLocation';
import usePermission from '@/hooks/usePermission';
import mapStyle from '@/style/mapStyle';
import CustomMarker from '@/components/CustomMarker';
type Navigation = CompositeNavigationProp<
StackNavigationProp<MapStackParamList>,
DrawerNavigationProp<MainDrawerParamList>
>;
const MapHomeScreen = () => {
const inset = useSafeAreaInsets();
const navigation = useNavigation<Navigation>();
const mapRef = useRef<MapView | null>(null);
const {userLocation, isUserLocationError} = useUserLocation();
const [selectLocation, setSelectLocation] = useState<LatLng | null>();
usePermission('LOCATION');
const handleLongPressMapView = ({nativeEvent}: LongPressEvent) => {
setSelectLocation(nativeEvent.coordinate);
};
const handlePressAddPost = () => {
//
if (!selectLocation) {
return Alert.alert(
alerts.NOT_SELECTED_LOCATION.TITLE,
alerts.NOT_SELECTED_LOCATION.DESCRIPTION,
);
}
navigation.navigate(mapNavigations.ADD_POST, {
location: selectLocation,
});
// 다시 뒤로 돌아왔을때는 위치를 초기화
setSelectLocation(null);
};
const handlePressUserLocation = () => {
if (isUserLocationError) {
// 에러 메시지 표시
return;
}
mapRef.current?.animateToRegion({
latitude: userLocation.latitude,
longitude: userLocation.longitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
});
};
// 1. 나의 위치 구하고. (geolocation)
// 2. 지도를 그곳으로 이동.
return (
<>
<MapView
ref={mapRef}
style={styles.container}
provider={PROVIDER_GOOGLE}
showsUserLocation
followsUserLocation
showsMyLocationButton={false}
customMapStyle={mapStyle}
onLongPress={handleLongPressMapView}>
<CustomMarker
color="RED"
score={3}
coordinate={{
latitude: 37.52016541,
longitude: 127.127520372,
}}
/>
<CustomMarker
color="BLUE"
coordinate={{
latitude: 37.550165411,
longitude: 127.127520372,
}}
/>
{selectLocation && (
<Callout>
<Marker coordinate={selectLocation} />
</Callout>
)}
</MapView>
<Pressable
style={[styles.drawerButton, {top: inset.top || 20}]}
onPress={() => navigation.openDrawer()}>
<Ionicons name="menu" color={colors.WHITE} size={25} />
</Pressable>
<View style={styles.buttonList}>
<Pressable style={styles.mapButton} onPress={handlePressAddPost}>
<MaterialIcons name="add" color={colors.WHITE} size={25} />
</Pressable>
<Pressable style={styles.mapButton} onPress={handlePressUserLocation}>
<MaterialIcons name="my-location" color={colors.WHITE} size={25} />
</Pressable>
</View>
</>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
drawerButton: {
position: 'absolute',
left: 0,
top: 20,
paddingVertical: 10,
paddingHorizontal: 12,
backgroundColor: colors.PINK_700,
borderTopRightRadius: 50,
borderBottomRightRadius: 40,
shadowColor: colors.BLACK,
shadowOffset: {width: 1, height: 1},
shadowOpacity: 0.5,
// 안드는 elevation
elevation: 4,
},
buttonList: {
position: 'absolute',
bottom: 30,
right: 15,
},
mapButton: {
backgroundColor: colors.PINK_700,
marginVertical: 5,
height: 48,
width: 48,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 30,
shadowColor: colors.BLACK,
shadowOffset: {width: 1, height: 2},
shadowOpacity: 0.5,
elevation: 2,
},
});
export default MapHomeScreen;
제대로 import도 한 것 같고, 실제로 안드로이드에서는 아이콘 이모지가 매우 정상적으로 보이는데 ios에서만 아이콘이 다르게 보이거나, 아예 안뜹니다. drawer 이모지도 동일하게 동작합니다. 혹시 어떻게 해결하는지에 대해 알고싶습니다! cache clean도 진행해보았습니다!!!
답변을 작성해보세요.
답변 1