Раскройте бренд своего приложения.
Очевидно, что вы будете использовать несколько цветов в своем приложении, но вопрос в том, как сделать использование цвета эффективным и оптимальным.
Мы быстро добавим цвета в наше приложение, поддерживающее реакцию.
Первым делом сначала определите иерархию вашего приложения и знайте, где вы хотите, чтобы ваш файл цвета был, я люблю хранить в папке utilities / config и называть его Color.js
Теперь откройте только что созданный файл и начните определять свои цвета.
const Colors =
{}
export default Colors;
Мы сделали простой объект «Цвета» и экспортировали его.
const Colors =
{
AQUA_GREEN: '#1A5276',
RED: '#B03A2E',
ORANGE: '#DC7633',
PURPLE: '#8E44AD',
GRAY: '#566573',
}
export default Colors;
Вы можете использовать Hex, rgba, rgb все, что идет на вашей лодке, мне нравится работать в основном с hex, если нет необходимости контролировать непрозрачность.
Теперь сохраните его и вернитесь в свой App.js или где-нибудь еще:
import Colors from './src/utilites/Color'
после импорта цветов вы можете использовать их по своему усмотрению ..
<Text style={{
backgroundColor: Colors.AQUA_GREEN,
color: Colors.ORANGE
}}>
{HELLO_WORLD}
</Text>
И это практически все.
Главное преимущество использования цветов в отдельных файлах, которые
1- Ремонтопригодный.
2- Многоразовый.
3- Сменный.
Например, если вы хотите изменить оттенок красного, вам не нужно будет использовать его в каждом файле, вы можете легко изменить его в своем файле, и он будет применен ко всему приложению.
** Автоматически **
Во всяком случае, шучу, лол, у меня есть эта серия простых вещей для настройки вашего приложения, ориентированного на реакцию. Если вы хотите, чтобы я осветил что-нибудь из этой серии, дайте мне знать в комментариях ниже.
До скорого!
P.S: Напишите в ладоши, мне просто нравится это уведомление. 👇
Вот ссылка на репозиторий github:
https://github.com/swairAQ/CustomizationReactNative
Учебник на Youtube:
https://youtu.be/NEX_eQR-mEY
