[ReactNative_study_6]Theme Provider 사용하기

- Theme를 변경하기 위해 기본적으로 background color / text color들을 변경한다.

  이걸 위해서 $(props=>props.lgiht?: "light":"dark") 이런 식으로 매번 모든 컴포넌트에서 사용하면 코드가 복잡해지고 

  헷갈리게 된다. 이를 위해서 <ThemeProvider>를 App.js에서 전체를 묶어줘서 어디에서나 받을 수 있게 사용한다.

 

1) styled 되어있는 theme js를 만든다.

export const lightTheme={
  BgColor:"=",
  textColor:"",
}
export const darkTheme={
  BgColor:"#",
  textColor:"#",
}

2) App.js에서 받아온다.

 

import { lightTheme,darkTheme } from './styled';

// hook을 이용하여 현재 theme를 받아온다.
 
 const isLight=useColorScheme()==="Light";

// 그리고 return에서 ThemeProvider를 사용한다.

  return (
    <ThemeProvider theme={isLight  ?  lightTheme  :  darkTheme}>
      <NavigationContainer>
        <Root></Root>
      </NavigationContainer>
    </ThemeProvider>
  );

 

3) 이제 App.js 내부에 있는 어디서든 theme 를 pros로 받아 올수 있다.

const Title =styled.Text`
    color:${props=>props.theme.textColor};
`;

위와 같이 하면 한번만 theme를 불러오고 그 아래 컴포넌트에서는 theme 별로 다르게 다 사용할 수 있다.