리액트 네이티브 개발환경 세팅 오류 해결집

 

오늘부터 저를 오류 수집 아티스트라고 불러주세요

 

react-native-cli로 프로젝트 생성 방법 

npm i -g @react-native-community/cli
# For TypeScript
npx react-native init 프로젝트명 --template react-native-template-typescript

 

 Command failed with exit code 1: npm install --save --save-exact react-native

npm cache clean --force

 

cli 설치시 발생할 수 있는 에러 

EEXIST: file already exists

cli를 uninstall 하고 다시 설치해도 해결되지 않아서 

아예 react-native가 저장된 파일에 가서 직접 삭제하고 다시 설치하니까 해결됨 

/Users/kimyuna/.nvm/versions/node/v18.16.0/bin/react-native

내 경우에는 여기에 저장되어 있었음. cd로 해당 파일 들어간 다음에 open . 해서 파인더 열어서 삭제해줌

 

TypeError: cli.init is not a function 

cli를 전역적으로 설치하면 문제가 발생할 수 있다고 함 -> 전역으로 설치한거 삭제하고 프로젝트 안에 다시 설치

참고) https://velog.io/@sonwanseo/TypeError-cli.init-is-not-a-function-React-Native

 

'react-native-template-react-native-template-typescript@*' is not in this registry

cli 삭제 후 재설치 -> 그 다음에 RN 프로젝트 생성

npm uninstall -g react-native-cli
npm i -g @react-native-community/cli

참고) https://kimck.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8CReact-Native-TypeScript-%ED%85%9C%ED%94%8C%EB%A6%BF-%EC%82%AC%EC%9A%A9%EC%8B%9C-%EC%97%90%EB%9F%AC

 

 

라이브러리 설치 

faker 설치 방법 

faker는 최신 버전을 설치하면 안된다. 패키지 개발자가 최신 버전을 망쳐놓았기 때문에 최신 버전으로 다운로드 하면 사용이 불가능하다

(자기가 열심히 만든 패키지를 망쳐버리는게 이해가 안됨) 

- 5.5.3 구버전으로 설치해준다. 아래 명령어는 타입스크립트 사용자들을 위한 것 

npm install faker@5.5.3
# For TypeScript
npm install @faker-js/faker --save-dev

그리고 이렇게 import 해서 사용하면 된다 

import {faker} from '@faker-js/faker';

 

react-native-paper 설치시 import할 때 Colors가 없다는 오류 발생 

- 구버전으로 설치해주면 해결됨 

npm i react-native-paper@4.6.0

 

 

react-native-vector-icon 설치 방법 

npx react-native link react-native-vector-icon 은 버전이 0.59 이하인 경우에만 사용 가능하다. 

최신 버전을 사용하려면 ios와 android 둘 다 따로 설정해줘야 한다

* 참고로 npx react-native link 명령은 npx react-native-asset로 변경되었다고 한다. 하지만 여기선 사용 불가능 

 

이 블로그 보고 따라하면 쉬움 (최고!) 

https://velog.io/@jmyoon8/react-native-vector-icon-%EC%9D%B8%EC%8A%A4%ED%86%A8%EB%B0%A9%EB%B2%95

 

(1) npm 사용해서 설치 

npm install react-native-vector-icons --save
# For Typescript
npm install --save react-native-vector-icons
npm install --save-dev @types/react-native-vector-icons

(2-1) ios 

[1] 프로젝트명.xcworkspace을 Xcode에서 실행해서 Font 파일 생성하기

-> 그다음 node_module 폴더에서 ttf 파일 가져와서 복사 붙여넣기 

 

[2] 프로젝트 > ios > 프로젝트명 디렉토리 > info.plist

해당 코드 <dict> 안에 작성해줌  

<key>UIAppFonts</key>
  <array>
    <string>AntDesign.ttf</string>
    <string>Entypo.ttf</string>
    <string>EvilIcons.ttf</string>
    <string>Feather.ttf</string>
    <string>FontAwesome.ttf</string>
    <string>FontAwesome5_Brands.ttf</string>
    <string>FontAwesome5_Regular.ttf</string>
    <string>FontAwesome5_Solid.ttf</string>
    <string>Foundation.ttf</string>
    <string>Ionicons.ttf</string>
    <string>MaterialCommunityIcons.ttf</string>
    <string>MaterialIcons.ttf</string>
    <string>Octicons.ttf</string>
    <string>SimpleLineIcons.ttf</string>
    <string>Zocial.ttf</string>
    <string>Fontisto.ttf</string>
  </array>

[3] 그리고 터미널에서 해당 코드 실행 

cd ios
pod install
cd ..
watchman watch-del-all

 

 

(2-2) android

[1] andorid > app > build.gradle 맨 밑에 해당 코드 넣기 (그냥 build.gradle에 넣으면 안됨, app 디렉토리 들어가서 넣기) 

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

[2] 터미널에서 해당 코드 실행 

cd android
./gradlew clean

 

오류가 너무 많이나서 울면서 설치했던 라이브러리. 이대로만 하면 진짜 오류 안나고 바로 사용 가능하다 

이렇게 했는데도 안된다면 밑에 내가 참고한 블로그 보면서 수정해보면 좋을 것 같다. 나보다 더 친절하고 자세하게 설명해준다 

참고) 

1. https://velog.io/@jmyoon8/react-native-vector-icon-%EC%9D%B8%EC%8A%A4%ED%86%A8%EB%B0%A9%EB%B2%95

2. https://dev-yakuza.posstree.com/en/react-native/react-native-vector-icons/

3. https://skyksit.tistory.com/entry/React-Native-%EB%B2%A1%ED%84%B0-%EC%95%84%EC%9D%B4%EC%BD%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-vetor-icon

4. https://stackoverflow.com/questions/48601206/error-unrecognized-font-family-material-design-icons-after-installing-react-nat

 

 

 

https://stackoverflow.com/questions/55235825/error-failed-to-build-ios-project-we-ran-xcodebuild-command-but-it-exited-wit