앱 브랜드를 팝업합니다.

분명히 앱에서 여러 색상을 사용할 것이지만 문제는 색상 사용을 효과적이고 최적화하는 방법입니다.

반응 네이티브 애플리케이션에 색상을 빠르게 추가할 것입니다.
먼저 앱의 계층 구조를 정의하고 색상 파일을 원하는 위치를 파악합니다. 저는 utility/config 폴더에 보관하고 이름을 Color.js로 지정하고 싶습니다.

이제 새로 만든 파일을 열고 색상 정의를 시작합니다.

const Colors =
{}
export default Colors;

간단한 "Colors"개체를 만들어 내보냈습니다.

const Colors =
{
AQUA_GREEN: '#1A5276',
RED: '#B03A2E',
ORANGE: '#DC7633',
PURPLE: '#8E44AD',
GRAY: '#566573',
}
export default Colors;

Hex, rgba, rgb를 배에 무엇이든 넣을 수 있습니다. 저는 불투명도를 제어할 필요가 없는 한 주로 16진수로 작업하는 것을 좋아합니다.

이제 저장하고 App.js 또는 다른 곳으로 돌아갑니다.

import Colors from './src/utilites/Color'
after importing Colors you can use as you please..
<Text style={{
backgroundColor: Colors.AQUA_GREEN,
color: Colors.ORANGE
}}>
{HELLO_WORLD}
</Text>

& 그것이 실질적으로 그렇습니다.
별도의 파일에서 색상을 사용하는 주요 이점은 다음과 같습니다.

1- 유지 보수 가능.
2- 재사용 가능.
3- 변경 가능.

예를 들어, 빨간색 음영을 변경하려면 파일마다 변경하지 않아도 됩니다. 파일에서 쉽게 변경할 수 있으며 전체 앱에 적용됩니다.

** 자동화 **

농담입니다. 어쨌든, 반응 네이티브 앱을 위한 이 일련의 쉬운 사용자 정의 항목이 있습니다. 이 시리즈의 내용을 다루고 싶다면 아래 댓글로 알려주세요.
다음 시간까지!

P.S: 하트를 놓으십시오. 저는 그 알림이 마음에 듭니다. 👇

github repo에 대한 링크는 다음과 같습니다.
https://github.com/swairAQ/CustomizationReactNative

유튜브 튜토리얼:
https://youtu.be/NEX_eQR-mEY