Styled-components ThemeProvider 활용(1)

iOS 앱 개발에서 React Native로 넘어와서 가장 마음 급하게 구현해보고자 한 것들은 다음과 같다.

• 홈뷰 구현(swift의 cell 관리가 꽤 까다롭다고 생각했기 때문에 RN에서의 홈뷰 구현은 어떻게 하는지 궁금했고, 현재는 FlatList로 뉴스피드 구현한 상태)
• Restful API 구현
• 컴포넌트 구성

 iOS 앱을 공부할 때에는 light/dark theme에 대한 관리는 Xcode 상에서의 asset에서 두 이미지를 하나로 묶어서 관리했기 때문에 RN으로 넘어와서는 큰 방법론적인 해결책이 떠오르지 않았다. (하단 사진 첨부)

Xcode-Assets : color set 지정

 React Native 로는 Styled-components에서 제공해주는 ThemeProvider를 통해 이를 적용해보려고 한다. 

app/index.tsx

index.tsx 안에서 가장 바깥에 ThemeProvider로 감싸준 다음, props로 theme을 넘겨준다. 이 theme은 style 폴더 안에 해당하는theme.tsx를 가져와서 우선 dark모드를 담당할 컬러가 제대로 들어가는지 테스트했다.

app/styles/theme.tsx

 타입스크립트로 구현했기 때문에 DefaultTheme 타입형으로 선언하고 dark,light 분리.

적용완료 ! 

app/navigations/MainTab.tsx

 Component는 적용이 되는데 Navigator 안의 screenOptions는 에러가 뜨는 것을 발견..! 

Styled-components ThemeProvider 활용(2) 보완점

• 모든 컴포넌트 적용
• navigator - screenOptions에는 적용이 안됨 ! (=>  useTheme/useContext 를 공부해보자)