RN 플랫폼을 통해 모바일 앱을 개발할 때 잊어버리기 쉬운 좋은 팁이 여럿 있습니다. 한 포스트로 쓰기에는 사소하지만 까먹을 때마다 보기 좋은 팁들을 모아봤습니다. 제 블로그를 찾아주신 다른 분들에게도 도움이 되었으면 좋겠습니다.
팁
서드파티 라이브러리 사용을 최대한 지양하세요.
그 중 제대로 관리되는 라이브러리는 소수입니다. 나중에 의존성 지옥에 갇혀요 (저처럼) 가벼운 라이브러리는 컴포넌트로 스스로 구현하는 것이 좋습니다. 하나라도 의존성에서 벗어나게 하세요. 지금 제공되는 기본 컴포넌트로도 충분합니다.
Button보다 TouchableOpacity 및 TouchableWithoutFeedback 컴포넌트를 사용하세요.
Button컴포넌트는 기능이 정말 빈약합니다. 네이티브 버튼을 구현하고 싶다면?
모든 텍스트나 뷰 색상을 지정해 주세요.
IOS 텍스트 컬러 기본 값과 Android 텍스트 컬러 기본 값이 다릅니다. 크로스 플랫폼의 가장 큰 장점이 하나의 코드로 모든 기기에 똑같이 보이게 할 수 있기 때문 아닌가요?
글자가 튀어나와요
부모 컴포넌트 스타일 속성에 아래 코드를 추가해 주세요.
flexShrink: 1;
[React Navigation] 다른 스크린으로 이동 시 인자 전달
먼저 컴포넌트에 다음과 같이 navigation 인자를 받습니다.
const OriginView = ({navigation}) => {
return ...
}다른 스크린으로 이동 이벤트 내에 다음과 같이 명시해줍니다.
navigation.navigate("ScreenName", { name: "banana" });이동한 스크린 컴포넌트에서 인자를 활용하려면 다음과 같이 작성합니다.
const ScreenName = ({ route, navigation }) => {
const { name } = route.params;
console.log(name)// banana
return ...
};
정중앙에 자식 컴포넌트 위치시키기
justifyContent와 alignItems를 부모 컴포넌트 스타일 속성에 명시합니다.
<View
style={{
justifyContent: "center",
alignItems: "center",
}}
>
<Text>horizental & vertical center</Text>
</View>
빌드 시 :app:installDebug 단계에서 진행되지 않는 경우
adb 서버를 재시작합니다.
adb kill-server
adb start-server
빌드 캐시 지우기
생각보다 빌드 오류가 자주 발생합니다. 이때 한번씩 해주면 됩니다.
cd android
./gradlew cleanrm -rf ~/.gradle/caches/
Execution failed for task ':app:mergeDexDebug'
빌드 시 발생할 수 있는 오류입니다. ./gradlew assembleRelease를 통해 빌드할 때 발생했습니다. android/app/build.gradle파일을 열어 다음과 같이 두 줄을 추가해줍니다.
android {
defaultConfig {
...
multiDexEnabled true
...
}
...
}
dependencies {
implementation 'com.android.support:multidex:1.0.3'
}
애플리케이션 버전 정보 설정
play store에 새로운 버전을 출시하기 위해선 ./gradlew bundleRelease 전에 android > app > build.gradle 에서 버전 코드를 수정해야 합니다.
android {
...
defaultConfig {
...
versionCode 2
versionName "1.1"
}
}
앱 엑세스 계정 등록하기
google play console 접속 > 정책 > 앱 콘텐츠 > 앱 엑세스 권한 (관리)
빌드 파일 지우기
Command + Shift + K
fatal error : YogaKit.modulemap' not found
xcodeproj 파일이 아닌 xcworkspace 파일에 들어가 빌드를 다시 해봅니다.
xcodeproj 파일에서 RN 기반 어플리케이션을 빌드할 때 발생하는 문제입니다.
빌드 시 PhaseScriptExecution 에러
The following build commands failed:
PhaseScriptExecution [CP-User]\ Generate\ Specs /Users/taegyeonglee/Library/Developer/Xcode/DerivedData/Checked-dweldbcwquxwlsknliekndlc/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/Script-34C70EFSED90A5EIL023AEB404F232A.sh (in target 'FBReactNativeSpec' from project 'Pods')
(1 failure)arm64 Mac 개발 환경에서 발생할 수 있는 문제인데 nvm가 기타 다른 모듈과 다른 아키텍처용으로 설치되어 있는 경우 발생할 수 있습니다.
아래 명령을 통해 nvm을 제거해 주세요. (nvm을 사용하지 않는 경우 해당)
brew uninstall nvm
inspector 사용
control + command + z 후 show inspector 선택, 사용 시 시물레이터 내 가상 키보드가 비활성화 되는 점 참고해주세요.
앱 아이콘 만들기
Android 앱 아이콘을 생성할 땐 기본 아이콘 이름 ic_launcher / 라운드 아이콘 이름 ic_launcher_round으로 다운받아 둘 다 적용해주는 게 좋습니다.
배포 스크린샷 만들기
AppMockUp Studio (Beta)
AppMockUp Studio (Beta) is a design tool for creating screenshots for the App Store and Play Store.
beta.app-mockup.com
목업 제작 사이트
MockUPhone
MockUPhone is a free tool that helps you wrap app screenshots in different mobile devices. Support iPhone mockup, iPad mockup, Android mockup and TV mockup.
mockuphone.com
버전 업그레이드 도우미
방치한 프로젝트를 업데이트하려 할 때 정말 많은 것들을 수정해야 할 수도 있습니다. 고생 좀 하실 수 있으니 미리미리 확인해보세요.
Upgrade React Native applications
react-native-community.github.io