inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

배달앱 클론코딩 [with React Native]

오더 수락 후, 도착버튼 눌렀을때 반응없는 오류 문의

252

최인설

작성한 질문수 6

0

수락 후, 녹색 도착버튼을 누르면 반응이 없습니다.

console.dir(navigation); 앞뒤에 test붙여서 출력해보았는데요,

어떤 object를 확인해봐야 할까요?

 

녹색버튼 onClick에는 console.log붙여봤는데 반응이 없습니다.

 

 

Ing.tsx소스코드는 아래와 같습니다.

import React, {useEffect, useState} from 'react';
import {Dimensions, Text, View} from 'react-native';
import NaverMapView, {Marker, Path} from 'react-native-nmap';
import {useSelector} from 'react-redux';
import {RootState} from '../store/reducer';
import Geolocation from '@react-native-community/geolocation';
import {NativeStackScreenProps} from '@react-navigation/native-stack';
import {LoggedInParamList} from '../../AppInner';

type IngScreenProps = NativeStackScreenProps<LoggedInParamList, 'Delivery'>;

function Ing({navigation}: IngScreenProps) {
  console.log('test');
  console.dir(navigation);
  console.log('test2');
  const deliveries = useSelector((state: RootState) => state.order.deliveries);
  const [myPosition, setMyPosition] = useState<{
    latitude: number;
    longitude: number;
  } | null>(null);

  useEffect(() => {
    Geolocation.getCurrentPosition(
      info => {
        setMyPosition({
          latitude: info.coords.latitude,
          longitude: info.coords.longitude,
        });
      },
      console.error,
      {
        enableHighAccuracy: true,
        timeout: 20000,
      },
    );
  }, []);

  if (!deliveries?.[0]) {
    return (
      <View style={{alignItems: 'center', justifyContent: 'center', flex: 1}}>
        <Text>주문을 먼저 수락해주세요!</Text>
      </View>
    );
  }

  if (!myPosition || !myPosition.latitude) {
    return (
      <View style={{alignItems: 'center', justifyContent: 'center', flex: 1}}>
        <Text>내 위치를 로딩 중입니다. 권한을 허용했는지 확인해주세요.</Text>
      </View>
    );
  }

  const {start, end} = deliveries?.[0];

  return (
    <View>
      <View
        style={{
          width: Dimensions.get('window').width,
          height: Dimensions.get('window').height,
        }}>
        <NaverMapView
          style={{width: '100%', height: '100%'}}
          zoomControl={false}
          center={{
            zoom: 10,
            tilt: 50,
            latitude: (start.latitude + end.latitude) / 2,
            longitude: (start.longitude + end.longitude) / 2,
          }}>
          {myPosition?.latitude && (
            <Marker
              coordinate={{
                latitude: myPosition.latitude,
                longitude: myPosition.longitude,
              }}
              width={15}
              height={15}
              anchor={{x: 0.5, y: 0.5}}
              caption={{text: '나'}}
              image={require('../assets/red-dot.png')}
            />
          )}
          {myPosition?.latitude && (
            <Path
              coordinates={[
                {
                  latitude: myPosition.latitude,
                  longitude: myPosition.longitude,
                },
                {latitude: start.latitude, longitude: start.longitude},
              ]}
              color="orange"
            />
          )}
          <Marker
            coordinate={{
              latitude: start.latitude,
              longitude: start.longitude,
            }}
            width={15}
            height={15}
            anchor={{x: 0.5, y: 0.5}}
            caption={{text: '출발'}}
            image={require('../assets/blue-dot.png')}
          />
          <Path
            coordinates={[
              {
                latitude: start.latitude,
                longitude: start.longitude,
              },
              {latitude: end.latitude, longitude: end.longitude},
            ]}
            color="orange"
          />
          <Marker
            coordinate={{latitude: end.latitude, longitude: end.longitude}}
            width={15}
            height={15}
            anchor={{x: 0.5, y: 0.5}}
            caption={{text: '도착'}}
            image={require('../assets/green-dot.png')}
            onClick={() => {
              console.log('click했음');
              console.log(navigation);
              navigation.push('Complete', {orderId: deliveries[0].orderId});
            }}
          />
        </NaverMapView>
      </View>
    </View>
  );
}

export default Ing;

react-native

답변 2

0

Si Choi

혹시 문제 해결 되셨을까요?

Marker 관련해서 저도 비슷한 문제이기는 한데, 일반 범위에서는 전혀 클릭을 인식하지 못하다가, 엄청나게 Zoom을 했을 때 가끔 인식이 되고 있어요... 

근데 이게 어쩔 때는 탭이 되고, 어쩔 때는 안 되니... 

0

제로초(조현영)

에뮬레이터와 메트로 서버를 껐다가 다시 켜보세요.

앱실행시 네이버맵 [401] 에러

0

1062

2

스타일링 라이브러리

0

160

2

expo, cli 선택 중에 고민이 있습니다.

0

180

2

JDK 버전이 달라도 괜찮나요?

0

240

2

dimenstion usewindowdeminstion

0

130

3

[맥 전용]환경 설정하기 1편 & [맥 전용]환경 설정하기 2편의 영상이 안나옵니다.

0

217

1

jdk11 버전과 gradle 버전의 호환성 관련 질문드립니다.

0

407

2

강의 외 질문입니다!

0

164

2

react native랑 맞는 ui 라이브러리 어떤게 좋을까요?

0

1552

2

react native와 spring boot 연결

0

365

1

java가 아닌 .kt에서 code push 에러가 발생합니다.

0

222

2

flipper 239 에러가 발생합니다.

0

172

2

package.json에 /lib/panino.js 문제입니다.

0

480

2

window - mac 협업 과정 질문합니다

0

221

1

ios 빌드 중 RCTBridgeDelegate.h import 오류

0

294

2

ios 앱 빌드 중 hermesEnabled 관련 오류발생

0

249

2

Socket 연결시 질문 드립니다.!

0

157

2

wifi 환경에서 axios 통신이 로컬서버에서 안됩니다.

0

430

2

iOS render error 질문드립니다.

0

417

2

iOS 가상머신 오류

0

173

2

npc react init 명령어 실행시 발생되는 오류

0

224

1

nom start 시 오류

0

122

1

NextJS 기반으로 만들어서 웹뷰 React Native로 배포 가능한가요?

0

1019

2

안드로이드 rn75 버전에 맞게 설정 중에 android13 다운로드에 대해서 막혔습니다!

0

187

2