공통
1. StackActions.push, navigation.dispatch(pushAction) 후에 페이지가 했다가 다시 원래 페이지로 돌아온다.
바뀐 url에 따라 Webview의 source를 바꾸지 않아서 발생했던 문제였다.
const pushAction = StackActions.push('WebViewContainer', {
url: `${SOURCE_URL}${path}`,
});
navigation.dispatch(pushAction);위와 같이 url의 source를 변경해야 한다.
2. Port 중복 이슈
sudo lsof -i :8081kill -9 (포트번호)
3. 첫 화면에서 뒤로가기가 된다 → 뒤로가기를 하면 흰색 화면이 뜸
react-navigation/stack의 Stack.Navigator를 도입한 이후의 이슈이다. 뒤로가기가 되면 안 될 첫 화면에서 뒤로가기가 되고, 뒤로가지면 흰색 화면이 뜨는 것이다. 웹에서 라우팅이 된다는 것이 문제였다. WebView에서 page.tsx를 시작페이지로 띄우고, page.tsx에서 메인 페이지로 redirect하는 방식이었다. 이 때, Next.js의 useRouter의 replace 메서드를 사용하는 바람에 RN의 Stack에 하나가 더 쌓인 것이다. 그래서, page.tsx로 뒤로가졌던 것이다. page.tsx에서 useAppRouter(RN으로 페이지 이동 요청)의 replace메서드로 수정하여 해결하였다.
4. Code Push가 즉각 반영되지 않는다.
appcenter codepush release-react -a gueit214/gloddy -d Production
iOS기기에 Code Push하는 명령어이다. 이 명령어를 쳐도 바로 반영이 되지 않는다.
맨 뒤에 -m를 붙여주니 해결이 되었다. mandatory(-m) 옵션은 의무적으로 업데이트를 수행하겠다는 의미이다.
IOS
1. 키보드 가리는 이슈 (미해결)
- https://reactnative.dev/docs/keyboardavoidingview
touchablewithoutfeedback
2. Hot Reloading(저장 후 즉시 반영)이 적용되지 않는 이슈
Xcode > 모드가 Release모드가 되어 있었음 > Debug모드로 수정하여 해결하였다.
3. 외부 페이지 이동 시 앱에서 연결됨
-
WebView의 onNavigationStateChange과 onShouldStartLoadWithRequest 속성을 활용하였다.
// .. const onNavigationStateChange = navState => { if (!navState.url.includes(SOURCE_URL)) { Linking.openURL(navState.url).catch(err => {}); return false; } }; const onShouldStartLoadWithRequest = navState => { if (!navState.url.includes(SOURCE_URL)) { Linking.openURL(navState.url).catch(err => {}); return false; } return true; }; return <WebView //.. onNavigationStateChange={onNavigationStateChange} onShouldStartLoadWithRequest={onShouldStartLoadWithRequest} />
4. 날짜 선택에서 분명 현재 이후 시간인데, 오전 0시 ~ 9시에서는 이전 시간이라는 에러가 뜸
사파리 이슈였다. 사파리의 javascriptCore 엔진은 계산을 다르게 하는 이슈였다.
5. Webview - iPhone에서 다른 사이트 띄우기
6. npm run ios:staging build 에러
- scheme 모드가 staging으로 되어있었기 때문 → debug로 변경하니 해결
7. scheme를 바꿔서 빌드 했음에도 env파일 값이 즉시 바뀌지 않는다
xcode > product > clean 눌러주어 캐싱되어 있던 것을 제거한 후 재실행하니 해결되었다. 값이 캐싱되어있던 것 같았다.
매번 xCode들어가서 clean해서 초기화하고, 재실행하기에는 번거로울 거 같아 구글링을 해보니 라이브러리 Repsiotry의 이슈에도 올라와 있었고, 해당 이슈는 아직 해결되지 않은 이슈였다.
-
해결 방법 : Scheme의 Pre Actions Run Script를 다음과 같이 작성하기
cp "${PROJECT_DIR}/../.env.staging" "${PROJECT_DIR}/../.env" echo “.env.staging” > /tmp/envfile // 추가된 내용 touch "${PROJECT_DIR}/../node_modules/react-native-config/ios/ReactNativeConfig/BuildDotenvConfig.rb" // 추가된 내용
블로그는, 공식 문서, Github Repository을 기반으로 한 2차 저작물이기에 즉시 반영이 되지 않는다. 해결되지 않는 이슈가 있다면 블로그를 1차로 찾아보고, 그래도 해결이 되지 않으면 공식 문서, Github README, Github Issues를 찾아보자.
"android:dev": "react-native run-android --variant=developmentdebug",
"android:staging": "react-native run-android --variant=stagingdebug",
"android:prod": "react-native run-android --variant=productiondebug",
"ios:dev": "react-native run-ios --scheme GloddyDev",
"ios:staging": "react-native run-ios --scheme GloddyStaging",
"ios:prod": "react-native run-ios --scheme GloddyProd",각 상황에 맞는 스크립트로 빌드하면 된다.
Android
1. Android Console > bundle 업로드 중 “4 버전 코드는 이미 사용되었습니다. 다른 버전 코드를 사용해 보세요”
app/build.gradle의 versionCode와 versionName을 사용하지 않는 번호로수정
2. iPhone Simulator는 잘 보이지만, Android Simulator는 흰 화면밖에 보이지 않는 이슈
- Android Simulator의 버전이 낮은 이슈
Android Studio에서 Simulator의 버전을 최신 꺼로 바꾸니 해결되었다.
첫 화면에서 뒤로가기 눌렀을 때 뒤로 안가진다.
- react-native/stack의 navigation의
canGoBack과goBack메서드를 활용했다
const onAndroidBackPress = () => {
if (navigation.canGoBack()) {
navigation.goBack();
} else {
Alert.alert('Hold on!', '앱을 종료하시겠습니까?', [
{
text: '취소',
onPress: () => null,
},
{text: '확인', onPress: () => BackHandler.exitApp()},
]);
}
if (webViewRef.current) {
webViewRef.current.goBack();
return true;
}
return false;
};
useEffect(() => {
if (Platform.OS === 'android') {
BackHandler.addEventListener('hardwareBackPress', onAndroidBackPress);
return () => {
BackHandler.removeEventListener(
'hardwareBackPress',
onAndroidBackPress,
);
};
}
}, []);