일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- ios
- currying
- styling
- JavaScript
- github
- js
- ES6
- nextJS
- npm install
- Branch
- REACT
- React Native
- HTML
- vscode
- viewcontroller
- rn
- Docker
- Android
- Swift
- commit
- Xcode
- npm
- GitLab
- ReactNative
- react-native
- xtring.log
- styled-components
- git
- DevOps
- shortcut
- Today
- Total
xtring.dev
[React Native] 당신의 iOS 앱은 Dark mode를 지원하시나요? - Dark mode의 대응을 할 수 없을 때 사용하자! 본문
[React Native] 당신의 iOS 앱은 Dark mode를 지원하시나요? - Dark mode의 대응을 할 수 없을 때 사용하자!
xtring 2020. 5. 31. 17:12
최근 iOS 13이 발표되면서 애플이 다크모드를 지원하게 되었습니다. 다크모드를 통해 사용자들은 서비스를 눈이 편하게 볼 수 있는 것이죠. 개발자들은 항상 흰 화면에 많은 텍스트를 보면서 눈이 시리다고 합니다. 그래서 IDE를 사용할 때 검정 배경을 많이 사용하죠.😎 그런데 이제 일반 사용자들에게도 다크 모드를 지원합니다. 현재 많은 서비스들이 이에 대응하고 적용하고 있습니다. 하지만 대부분의 회사들은 이에 대해 바로 대응할 수는 없겠죠? 그런 경우 어떻게 해야할까요?🤔
대응이라는게 플로우를 따라가는 것도 있지만 지원하지 못한다면 서비스에서는 아예 보여주지 않는 방법도 있습니다. 그래서 저희 서비스에서도 당장 적용할 수 없어 다크모드를 강제로 미지원할 수 있도록 앱을 세팅하기로 결정했습니다! 저희 서비스에서 다크모드로 인해 생긴 가장 큰 문제점은 실행 중인 기기의 Status Bar가 제가 세팅해 놓은 Status Bar와 맞지 않아 글자와 아이콘이 보이지 않는 문제점이 발생했습니다!
다크모드를 disable하는 방법은 두가지로 둘 중 하나를 선택해서 적용하시면 됩니다. 😆저는 개인적으로 첫번째 방법을 추천드립니다!
방법 1) appDelegate.m(based Objective-C)
didFinishLaunchWithOptions 메소드 안에 넣어주세요!
if (@available(iOS 13.0, *)) {
rootView.overrideUserInterfaceStyle = UIUserInterfaceStyleLigt;
}
방법2) info.plist
간단하게 Xcode에서 info.plist를 열어주고 수정하면 됩니다!
<key>User Interface Style</key>
<string>Light</string>
저는 개인적으로 방법2) info.plist를 수정하는 방법을 통해서 대응을 완료했습니다. 우선 appDelegate를 수정하는 것은 Objective-C를 통해서만 가능하며 앱의 세팅과 관련한 코드는 info.plist에서 최대한 설정하는 것이 좋다고 생각해서 입니다.
적용을 완료하셨나요? 그렇다면 Xcode에서 cmd + shift + k
로 캐시를 한번 날려주고 Run(cmd + r
)하시면 앱에 적용이 되었을거에요 😁
이 방법은 React Native 뿐만 아니라 기존 iOS(based Objective-C)앱에도 적용이 가능한 사항입니다!
'Front-End > React Native' 카테고리의 다른 글
[React Native] React Native 프로젝트에서 .jsx 사용하기 (0) | 2020.07.02 |
---|---|
[React Native] React Native version mismatch - 앱 실행 시 version mismatch 오류 해결 방법! (0) | 2020.06.05 |
[React Native] Platform 모듈 사용하기 - OS 별로 다른 컴포넌트, 스타일을 적용해 보자! (0) | 2020.04.23 |
[React Native] Android 실기기에 앱 설치하기 (0) | 2020.04.23 |
[React Native] npx react-native run-ios[android]가 실행이 안된다!! - App crash 시 (0) | 2020.02.17 |