좋은앱개발자가되고싶다

이번에 국내 / 해외 배송 메모

react-native-webview 를 사용하면

os 글자 크기에 따라 변경된다.

webview props 에 textZoom={100} 을 넣으면 일정한 크기로 보여지게된다.

비슷한 원리로  <Text> 컴포넌트의 디폴트 사이즈도 os 글자 크기에 따라 변경되는데

이런 함수로 해결하면 된다.

react native webview 는 고질적인 문제가 있다.

이문제는 크롬의 업데이트에서부터 시작됐다.

webview 에서 크래시가 지 않는 방법은 대부분의 RN 개발자들이 검색 해봤을 것이다.

가장 저차원 적인 문제해결은 android manifest 에 

값을 변경하는 것이다.

하지만 해당 hardwareAccelarted 를 전역에서 변경하면 react-native-video 같은 화면이 정상작동하지 않을 수 있다.

대부분의 개발자들이 workaround 의 한 방법으로 

Webview 스타일에

해당방법으로 opacity 를 넣는다.

해당 방법으로는 해결이 된다.

오늘 작성하는 글은

해당 방법으로도 해결되지 않는 버그가 생겼을때 해결하는 방법이다.

주로 webview 의 길이가 많이 길어지기에, scrollview 안에서 사용하는 경우가 많은데,

scrollview안에 있는 webview 의 길이가 매우 길어지면(react-native-webview 에는 5000px 정도로 나와있다)

스크롤이 업되거나 다운되면서 스크롤의 범위가 벗어날때, 크래시되는 경우가 발생한다.

scrollview의 bounce가 실행되며, 앱이 꺼지는 경우가 있는데

웹뷰를 포함한 scrollview 에서

해당 props 로 bounce 액션을 막아주면 해결된다.

FastImage 에서는 gif가 ios android 모두 잘 정상작동한다.

하지만

과 같은 react-native 의 Image 컴포넌트를 기본으로 개발한 라이브러리들에서는 gif 가 정상작동하지 않는다

이를 위해선

app/build.gradle 에

를 추가해줘야 정상작동한다.

react native debugger 에는 로그가 나오지않아

안드로이드 스튜디오 로그캣으로 디버깅을 해보았다.

에러 메세지는 

the crashlytics build id is missing. this occurs when the crashlytics gradle plugin is missing from your app's build configuration.

였는데, 안드로이드에 추가로 세팅을 해줘야 하는 부분이 있었다.

https://rnfirebase.io/crashlytics/android-setup

해당 부분을 참고하여

android/build.gradle

// ..
buildscript {
  // ..
  repositories {
    // ..
    google()
  }
  // ..
}

android/build.gradle

// ..
buildscript {
  // ..
  dependencies {
    // ..
    classpath 'com.google.firebase:firebase-crashlytics-gradle:2.9.9'
  }
  // ..
}

android/app/build.gradle

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services' // apply after this line
apply plugin: 'com.google.firebase.crashlytics'
// ..

로 해결했다.

현재 앱에는 

이런 기능들이 붙어있다.

현재 firebase crashlytics 를 추가하는데

해당 에러가 발생했다.

내용을 읽어보고

해당 내용들을 추가했다.

추가 후 정상작동한다.

firebase 의 analytics 를 적용했다.

를 사용하고 있었기 때문에, navigation 의 state 가 변경될때마다

화면을 기록하기로했다.

기존 네비게이션 컨테이너에 추가한 코드로, 페이지별 어느 상품인지를 확인하기위해

param도 추가했다.

ios 에서 빌드시 initiateOnDeviceConversionMeasurementWithPhoneNumber 해당 에러가 났는데, 찾아보니

18.5 버전부터 추가가되었다고한다.

현재 사용하고있는 

버전이 18.3 버전이기 때문에

 yarn upgrade @react-native-firebase/analytics@18.3.0

을 통해 버전을 통일시켜주니 해결되었다.

정상 작동하는 것으로 확인 할 수 있다.

RN의 가장 큰 장점을 꼽으라면, 나는 code push를 꼽는다.

hotfix 가 있을때 빠른 대응을 할 수 있기 때문이다.

주로 나는 코드푸쉬를 할때, 코드푸쉬할 것이 있으면, 로딩화면을 띄워주고 업데이트 후 재시작을 하는 편이다.

https://liveforownhappiness.tistory.com/69

이번에 앱업데이트를 하면서 안드로이드에서는 정상작동을 하는 것을 확인했지만,

ios에서 앱업데이트가 되고나서 롤백이 되는 현상을 경험했다.

롤백이 될뿐아니라, 업데이트가 완료되고 앱이 꺼지는 현상을 발견했다.

해결책은 patch-package 였다.

현재 rn 0.72.3 버전을 사용 하고있는데

해당파일에

를 추가해주었다.

정상작동 확인

그냥 TextInput 을 사용하면

이런식으로 가운데 정렬이 된다.

이는 TextInput 의 textAlignVertical prop 로 지정해줄수가 있는데, 

해당 Props 만 textAlignVertical='top' 으로 적용하면 원하는대로 나오지않고

multiline 도 true 값으로 줘야 적용된다.

해당 코드는

이고 적용된 화면은

이다.

react native 로 UI를 그리다보면

해당 에러를 많이 만난다.

이는 스크롤의 축이 같은 Flatlist, scrollview, sectionlist 등의 컴포넌트안에 

또 넣으면 발생하는 에러이다.

horizontal, vertical로 축이 다르면 문제가 되지 않는다.

지금 그리는 화면에서, Flatlist 의

를 사용하지않고

큰 scrollview 안에 같은 스크롤축이 있는 flatlist 를 넣어야 하는 경우가 발생했다.

결국, Flatlist 를 map 형식으로 view 를 찍으면서 큰 scrollview 하나만 사용하도록 변경하였는데,

페이징 처리가 문제였다.

이런식으로, 스크롤을 할때, 남은 offset을 계산하여 pagenation 을 적용했다.