오늘부터 저를 오류 수집 아티스트라고 불러주세요
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
라이브러리 설치
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/