React Native 앱 제작기: 다크모드 배경화면이 launchScreen에서 안먹는 이슈 수정기

들어가기전에

 

JS프로젝트의 장점은, 자유고 단점은 뭐가 기준이 없다는겁니다.

대략적인 코드만 설명 위주(실제 코드를 올릴수없으니..)니 대충 추측으로 더듬어봅시다..

 

---

 

create-react-native-app & expo 도움으로 RN앱을 만들었는데,

이상하게 모든 구간에 light/dark 테마관련한 로직을 적용했는데

 

딱 한곳만 안되는곳이 있었다 '앱킬때'

 

구글링해보니 일단 Xcode (iOS기준) 켜서 splashscreen(or launchscreen..).storyboard 의 배경색을을 확인 해보라는것이였다.

 

iOS앱 구조상 splashscreen.storyboard 자체는 앱과 별도로 돌아가고 앱을 키면 무조건 켜지는데,

여기에 배경색이  시스템 다크모드인지 아닌지에 따라서 따라가기 때문. 

 

잘되어있는데요?

하지만  System Background Color로 되어있었고 이부분은 앱에서 인의적으로 UIUserInterfaceStyle 을 변조하지않는이상

기본적으로 다크모드에서는 어두운색, 아닌경우는 흰색으로 표시된다. 

 

그니까 나는 이경우가 아니였음. 실제 테마를 앱에서 강제 설정하면 UIUserInterfaceStyle도 변조하긴

하지만 내 테스트 조건은 자동모드기 때문에 해당 로직이 동작하지 않음을 확인했다.

 

그러다가 코드를 찾아보니, 앱에 폰트파일이 로드및 앱시작전 이것저것 처리를 위해

useCachedResources에서 꽤나 무언가를 처리하고 있었는데.. 문제는 이부분이였다.

 

export default function App() {
  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();

  if (!isLoadingComplete) {
    return null;
  } else {
    return (
      <SafeAreaProvider>
        <StatusBar />
        <AppContainer />
      </SafeAreaProvider>
    );
  }
}

 

그니까 hooks/isLoadingComplete 가 실제 로드 처리전 까지 시간이 실제로 걸리는 로직이 있고, 그렇기 때문에

false을 반환하기 때문에, if 분기로 null을 반환했기 때문에 그냥 빈페이지(?)가 표시되었던것,

 

해당 페이지에서는 어떤 컬러셋이 기본베이스가 적용되지 않고

적용할려고해도 이건 App.tsx 최상위니까 애가 뭘 할수있는 구조가 아니였던것

 

더미로 간단하게 집어넣어줬다. 이렇게

 

export default function App() {
  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();

  if (!isLoadingComplete) {
   return (<SafeAreaProvider style={backgroundColor: Colors.background}}>
        <StatusBar>
    </SafeAreaProvider>)
  } else {
    return (
      <SafeAreaProvider>
        <StatusBar />
        <AppContainer />
      </SafeAreaProvider>
    );
  }
}

대충 Colors라는 Stylesheet을 로드했다 칩시다..

 

 

이게 답인지 모르겠으나, 관련 VOC는 일단 해결완료로 넘어가졌다.

계란으로 바위치기으로 RN을 하고있는지라 사실 이게 맞나 아니냐는 잘 모르겠다.. 해결이 되었으니 일단 된건가??

 

이런류 개발은 뭔가 깊은 질문을하면 그냥 어버버 답변 못함 ㅎ...

 

오늘도 나는 삽질을한다..