[React Native]Figma에서 Export한 이미지 깨질 때

Figma로 디자인된 UI를 다룰 때 백터로 이루어진 SVG파일이 아닌 이미지를 PNG로 내려받아 화면에 랜더 시켜줄 때 디바이스에선 마치 이미지가 깨진 것처럼 흐리게 보일 때가 있습니다. 이미지 깨질 때 Example 시뮬/에뮬레이터에서 볼 때보다 debug 앱으로 내려받아 Android OS 디바이스에서 볼 땐 흐릿흐릿한 느낌이 더 도드라집니다. 해결 및 적용 후 퍼블리셔 분께 여쭤본 결과 Figma에서 Export 할 때 2~4 배로 내려받아, 코드상에서 Figma에 표기된 width,height를 적용해 주면 선명하게 보인다는 피드백을 받아 해결할 수 있었습니다. ... const Img = styled.Image` width: 155px; height: 116px; `; ... ...

• format_list_bulleted React-Native
• · 2023. 4. 29.
• textsms

[React Native]Warning Excessive number of pending callbacks: 501

Excessive number of pending callbacks: 501 Map함수를 통해 다수의 를 랜더하며 발생한 Warning이다. 관련 github issues https://github.com/facebook/react-native/issues/34442 PLEASE REPORT: Excessive number of pending callbacks: 501 · Issue #34442 · facebook/react-native Description Hi, I keep the getting the error seen on the screenshot below. For context, I'm creating an app (IOS) where users can swipe through a numbe..

• format_list_bulleted React-Native
• · 2023. 4. 18.
• textsms

[React Native]IOS z-index이슈

RN으로 UI를 그릴 때 발생한 일이다. 포지션 absolute 에 z-index 값을 줘서 아래 컴포넌트들 위에 랜더 되어야 하는 것이 , Android에선 잘 되는데 , IOS는 마치 z-index가 먹히지 않는 것처럼 하위 컴포넌트들 아래에 랜더 됐던 이슈가 있었다. 문제가 된 코드와 화면 const OptWrap = styled.View` position: absolute; z-index: 999; top: 90px; width: 100%; height: auto; background-color: #ffffff; border: 1px solid #c5c5c5; border-radius: 5px; `; ... 옵션 선택 this.setState({optVisible: !optVisible})}> {..

• format_list_bulleted React-Native
• · 2023. 4. 12.
• textsms

[React Native]react-native-shadow-generator

react-native-shadow-generator RN에서 OS별로 shadow 효과를 주는 법이 다른데, UI에 shadow 효과와 값을 볼 수 있고 조절도 가능하여 참고하기 좋은 깃헙 페이지입니다. https://ethercreative.github.io/react-native-shadow-generator/ React Native Shadow Generator ethercreative.github.io

• format_list_bulleted React-Native
• · 2023. 4. 11.
• textsms

[React Native]android debug apk 명령어로 추출하기

Bundle 파일 생성하기 프로젝트 루트 디렉토리 터미널에서 아래와 같이 입력 react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/ android 디렉토리로 이동 후 작업 cd android ./gradlew assembleDebug 주의하실 점은 코드 수정 후 새로 추출하기 위해서는 Bundle 파일부터 새로 생성해야 수정한 코드가 반영됩니다. 수고하셨습니다.

• format_list_bulleted React-Native
• · 2023. 4. 10.
• textsms

[React Native]Android FullScreen(전체화면) 적용하기

회사에서 키오스크용 Android 앱 개발하며 풀 스크린을 적용할 일이 생겨 적용하게 되었고 , Android 네이티브 쪽으로 검색하면 나오긴 하지만 RN 키워드와 함께 검색하면 나오지 않았기에 ,, 공유하고자 작성한다. 사실 에뮬상에서 보기에만 적용하려면 에뮬 설정에서 해당 부분 체크만 하면 되긴하지만 , 실제 서비스상에선 적용되지 않으므로 직접 Andorid 네이티브 파일을 수정해야 했다. xml 수정하기 - android/app/src/main/res/values/styles.xml - android/app/src/main/AndroidManifest.xml - android/app/src/main/java/com/${appName}/MainActivity.java import android.vie..

• format_list_bulleted React-Native
• · 2023. 4. 7.
• textsms