작성한 질문수 1

0

저는 babel.config.js에 아래와 같이 추가해서 문제를 해결했습니다.

  overrides: [
    {
      test: fileName => {
        return !fileName.includes('node_modules\\react-native-maps');
      },
      plugins: [
        ['@babel/plugin-transform-class-properties', {loose: true}],
        ['@babel/plugin-transform-private-methods', {loose: true}],
        ['@babel/plugin-transform-private-property-in-object', {loose: true}],
      ],
    },
  ],

0

제 깃헙이 아니라 질문자님의 깃헙을 올려주시면 좋을것같습니다.

0

reacNN

2024-09-30T16:12:17.962Z

확인 감사합니다.

단순 <Marker/> 표시에서는 getNativeComponent 주석처리로 해결이 되었지만,

onLongPress 를 시뮬레이터에서 시도해보니 바로 다시 발생했습니다.

 

프로젝트를 처음 설치부터 버전에 유의하며 다시 시도해보는 것이 좋을까요???

 

0

안녕하세요, 인프런 AI 인턴입니다. raiactivity님.

지금 겪고 계신 TypeError: this.getNativeComponent is not a function (it is undefined) 에러는 react-native-maps 라이브러리와 관련된 문제로 보입니다. 이와 같은 오류는 주로 라이브러리 버전 충돌이나 호환성 문제로 발생할 수 있습니다. 하지만 기존의 해결 방법이 root cause를 해결하지는 않는 것 같아, 다른 가능한 해결 방법을 제안드리고자 합니다.

관련 질문 및 링크

유사한 문제가 발생했을 때 다른 수강생들께서 제안한 해결책들을 아래 링크들을 통해 확인해 보세요.

1. react-native-vector-icons 에러 관련 질문 - 지식 공유자 Kyo
   
2. 템플릿 리터럴 오류 질문 - 지식 공유자 Kyo
   

해결 방법

1. 라이브러리 버전 확인 및 업그레이드/다운그레이드

npm 또는 yarn을 통해 react-native-maps와 관련된 라이브러리 버전을 확인하고, 호환성 있는 버전으로 맞춰보는 방법이 있습니다.

npm uninstall react-native-maps
npm install react-native-maps@1.14.0
npx pod-install ios

혹은, 강의 자료에서 사용된 버전으로 맞추어 보세요.

2. MainActivity.java 수정 확인

react-native-maps를 사용하기 위해 다음 코드가 MainActivity.java에 포함되어 있는지 확인해보세요.

import android.os.Bundle;
import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {
  @Override
  protected String getMainComponentName() {
    return "YourAppName";
  }

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null);
  }
}

3. node_modules 및 빌드 캐시 재설정

라이브러리 호환성 문제 해결을 위해 캐시를 초기화하고, node_modules 폴더를 삭제 후 다시 설치해보세요.

rm -rf node_modules
npm install
npm start --reset-cache

4. 라이브러리 패치

해당 이슈에서 제안된 임시 방편인 getNativeComponent의 주석 처리가 결국엔 올바르지 않은 접근 방법이라 우려가 된다면, 해당 라이브러리의 패치를 직접 작성해 여기서 완전히 해결하도록 하는 방법도 있습니다. 예를 들어:

class MapMarker extends React.Component {
  // getNativeComponent;
  getMapManagerCommand;
  getUIManagerCommand;
  static Animated;
  marker;
}

대신, @patch-package/hermes-engine 등을 활용해 안정적으로 패치할 수 있습니다.

추가적인 해결 방법:

• react-native 버전과 react 버전 호환성 검사: 현재 사용 중인 react, react-native, react-navigation 등의 호환성 확인.
  
• 다른 라이브러리로 대체: 만약 react-native-maps의 지속적인 문제가 발생할 경우, 다른 지도 라이브러리도 고려해보세요.
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.