React Native най-добри практики (част 1)
1. Използвайте система за проектиране
Без последователно оформяне е трудно да се постигнат възможно най-добрите резултати. Системата за проектиране е набор от правила и принципи, които поставят основата за това как трябва да изглежда и да се чувства приложението. Трябва да имате предвид 4 неща, докато работите с вашата система за проектиране.
- Разстояние:Докато работите с междуплатформено приложение, размерите на екрана може да варират между различните компоненти, присъстващи на екрана, но се уверете, че осигурявате последователно разстояние между тях за съгласуван вид.
- Цвят: Изборът на правилните цветове е не само най-важното нещо, но и начинът, по който ги използвате. Чудесно решение е да използвате Цветови палитри, където можете да наименувате цветовете си според предпочитаните конвенции за именуване, което увеличава цялостния ви работен процес.
Винаги наименувайте цветовете си по начин, по който не се налага да мислите как трябва да изглеждат в приложението ви, наименувайте цветовете си по по-дефиниран начин, за да можете да вземате по-бързи решения.
Например, „Основен“ като основен цвят в приложението, „Опасност“ като цвят, който ще се използва при опасност икони или навсякъде, където налагате червения цвят.
- Типография: Често забравяме как шрифтовете променят начина, по който нашето приложение изглежда в резултатите. Най-добре е да се придържате към ограничен набор от шрифтове семейства, тегла и размери, за да постигнете приятен съгласуван вид .
2. Свойства на адаптивния стил
В уеб приложенията необходимостта от адаптивен дизайн е очевидна, когато размерите на екрана могат да варират от малко мобилно устройство до широкоекранно настолно устройство. Но в React Native, където целта са само мобилни устройства, може да не работи със същия размер на устройството, но разликата в размера на екрана вече е достатъчно голяма, което затруднява намирането на този размер, който пасва всичко за стилизиране на приложението.
- За да работите с отзивчив дизайн, можете да дефинирате някои точки на прекъсване, като категоризирате различни екранни устройства.
Например:
- С тези точки на прекъсване всичко с ширина под 321 пиксела трябва да попада в категорията на по-малко мобилно устройство, а под 768 е обикновено мобилно устройство, а всичко по-широко от това е таблет.
3. Използвайте TypeScript
TypeScript и React правят перфектна комбинация, особено ако работите в Visual Studio Code. Предимството, което получавате, като използвате TypeScript, е, че вместо да разчитате на PropTyes валидирането на React, което се случва само когато компонентът се изобразява по време на изпълнение, TypeScript ви позволява да валидирате всички грешки във вашия проект. Освен това можете да дефинирате типове свойства, които да приемат само стойности, налични в темата, и с това вашият редактор ще допълни автоматично валидните стойности вместо вас.
4. Ресурси за статично изображение
Винаги управлявайте своите ресурси за статично изображение по правилния начин, в противен случай приложението ви ще използва много време за работа със събитие за статични файлове, когато това не е необходимо. За да добавите статично изображение във вашето приложение, трябва да го направите по такъв начин, че изискваното име на изображението да е дефинирано статично.
Например,
5. Използвайте стилове, специфични за платформата
React Native предлага вграден API за писане на специфичен за платформа код, без API на платформата в крайна сметка ще имате много различни стилове за различни платформи (Android и iOS), за да организирате тези стилове, можете да използвате модула Platform for Stylesheets. Можете да използвате Platform.OS за автоматично откриване на операционната система и след това да приложите правилните стилове.
Например,
6. Създайте псевдоними
Създаването на псевдоними е най-добрият начин да се отървете от проблема с вложените импортирания, като например ActiveButton от „../../Components/Buttons“. Можете да използватеbabel-plugin-module-resolver, за да създадете такива псевдоними.
7. Винаги присвоявайте уникален ключ на всеки елемент
В React или React native присвояването на уникален ключ може да реши много проблеми, които затрудняват работата с приложения, съдържащи компоненти като Списъци.
Например,
