웹에서의 select box 과 같은 형태로 랜더 되길 바라는 디자인 요구사항이 있었습니다. 다양한 RN picker 라이브러리들을 찾아보고 그중에서 제일 웹에서의 select box와 흡사하고 npm 주간 다운 수가 어느 정도 나오며 도큐먼트가 잘되어 있는, 'react-native-dropdown-picker' 을 사용하게 되었습니다. 사용하면서 발생했던 이슈들과 적용기를 적어보자 합니다. react-native-dropdown-picker https://hossein-zare.github.io/react-native-dropdown-picker-website/ React Native Dropdown Picker React Native Dropdown Picker is a single / multip..
문제가 된 코드와 화면 서버에서 String으로 이루어진 장문의 더미 데이터를 받아서, 로 이루어진 컴포넌트로 랜더 시킬 때 생긴 이슈입니다. 웹에서 word-break 와 같은 효과를 원했고, flex-wrap: wrap 을 사용해도 원하는 대로 화면에 나오지 않았습니다. 문제가된 화면 | 좌 IOS / 우 Android ... const CpnModelInfoText = { ...CpnModelInfoRowText, width: 'auto', marginRight: 0, color: '#444444', } as TextStyle; ... ... 해결 flex-shrink 속성을 사용해 원하는 결과를 얻을 수 있었습니다. 더미 데이터 내부에 \n을 포함하고 있어서 위와 같이 줄바꿈 되었지만, flex-..
Figma로 디자인된 UI를 다룰 때 백터로 이루어진 SVG파일이 아닌 이미지를 PNG로 내려받아 화면에 랜더 시켜줄 때 디바이스에선 마치 이미지가 깨진 것처럼 흐리게 보일 때가 있습니다. 이미지 깨질 때 Example 시뮬/에뮬레이터에서 볼 때보다 debug 앱으로 내려받아 Android OS 디바이스에서 볼 땐 흐릿흐릿한 느낌이 더 도드라집니다. 해결 및 적용 후 퍼블리셔 분께 여쭤본 결과 Figma에서 Export 할 때 2~4 배로 내려받아, 코드상에서 Figma에 표기된 width,height를 적용해 주면 선명하게 보인다는 피드백을 받아 해결할 수 있었습니다. ... const Img = styled.Image` width: 155px; height: 116px; `; ... ...
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..
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})}> {..
react-native-shadow-generator RN에서 OS별로 shadow 효과를 주는 법이 다른데, UI에 shadow 효과와 값을 볼 수 있고 조절도 가능하여 참고하기 좋은 깃헙 페이지입니다. https://ethercreative.github.io/react-native-shadow-generator/ React Native Shadow Generator ethercreative.github.io
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 파일부터 새로 생성해야 수정한 코드가 반영됩니다. 수고하셨습니다.
Figma 디자인상 아이콘들을 png로 적용하다 보니, 앱 내에서 선명하게 나오지 않는 디자인적인 이슈를 발견하게 되어 모든 아이콘을 SVG로 다시 적용하게 되었다. React-Native에서 SVG 파일을 활용하기 위해선 두 가지의 라이브러리를 필요로 한다. react-native-svg yarn add react-native-svg react-native-svg-transformer yarn add --dev react-native-svg-transformer 두 라이브러리를 받고 잊지말고 ios 에도 적용해준다. cd ios && pod install react-native-svg-transformer 설정 react-native-svg-transformer 를 위한 설정이 필요하기 때문에 metr..
회사에서 키오스크용 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..