react-native-vector-icons 에러 관련 질문
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
react-native-screens 버전 호환 문제
2
155
1
안드로이드 실행 중 Drawer네비게이션과 MapView 성능 문제
0
104
2
해당 강의 부분은 실제 활용하기에 부족해 제가 해결한 방법입니다.
0
97
1
소스코드가 강의 순서랑 다른가요?
0
74
2
현재 Windows에서 VsCode로 작업 중인데 추후에 IOS도 가능하게 하려면
0
116
2
react-native-fast-image는 react 19 버전에서 설치가 안되나요?
0
209
2
SQL Shell의 역할이 무엇인가요?
0
92
1
혹시 해당 강의에서invalidateQueries를 사용한 이유가 있을까요?
0
79
2
빠르게 실행해보고싶습니다.
0
84
1
강의 수강 순서 관련
0
72
1
애뮬레이터 실행 방법
0
101
2
무료 Apple ID로 실기기 테스트 가능한가요?
0
92
2
ios 실기기 연결
0
70
2
npm run ios에러
0
76
1
10월 삭제 예정인 강의는 이유를 알 수 있을까요?
0
102
1
캘린더 개발 후에 navigation 에 대해서 궁금한 점이 있습니다.
0
52
1
안드로이드 위치 권한 이슈 2가지 문의
0
72
1
지도가 보이려면 음.. 작성해주신 스타일과 다르게
0
75
0
제대로 설치한거같은데 안드로이드랑 ios 둘다 앱실행이 안되는것같아요
0
83
3
강의 내용을 보면 전체적으로 function 함수 키워드를 사용하시는데
0
70
2
강의 3-9 에서 useGetRefreshToken 훅 안에 즉시 함수로 처리하는 이유가 궁금합니다!
0
83
2
사내에서 figma.com 업로드 안되나요?
0
97
1
AWS EC2 + RDS 설정
0
86
2
안드로이드 안켜집니다.
0
92
2





