Стилизация в React Native | Кодементор

Изучите лучшие способы оформления приложения React Native

Перейти к профилю SaidHayani@

СаидХаяни@
Первоначально опубликовано на Остатки

14 марта

Если вы только начинаете работать с React Native или уже имеете опыт работы с ним, стиль может показаться вам немного сложным в первый раз. это происходит, когда вы приходите особенно из Интернета и когда вы пытаетесь написать стиль React Native, как вы обычно делаете, когда пишете CSS в Интернете, и вы обнаруживаете, что ожидали. метод, который React Native использует для стилизации, использует свойства CSS, и на самом деле это не то же самое, что обычный CSS. в любом случае, мы собираемся увидеть, как мы делаем стили в React Native, в дополнение к методу стиля React Native, мы рассмотрим различные способы стилизации приложения React Native.

Если вы новичок в React Native, я написал руководство, которое поможет вам начать работу с React Native проверить это здесь!

Кончик : Использовать Кусочек чтобы легко делиться и повторно использовать компоненты React для создания приложений. Это бесплатно и с открытым исходным кодом, так что не стесняйтесь прыгать и делать свои компоненты многоразовыми.

Метод React Native style

React Native по умолчанию дает нам два мощных способа стилизации нашего приложения:

Реквизит стиля

Вы можете добавить стиль к своему компоненту, используя style propsвы просто добавляете style props к вашему элементу, он принимает объект свойств.

Если вы посмотрите на наш код, мы используем свойства CSS с заглавной буквы, обратите внимание, что некоторые свойства не поддерживаются в react-native, при попытке использовать любое неподдерживаемое свойство будет выдаваться ошибка, анимация CSS3 не поддерживается вместо этого React Native оставь это на API анимации

Реагировать на родное использование Флексбокс для макета это отличный инструмент для определения макета вашего приложения React Native, в других местах он не работает так же, как в CSS, но действительно прост в использовании и гибок.

Нативный флексбокс React — отличный способ справиться с манипулированием макетом, так легко спроектировать макет, но вам нужно некоторое базовое понимание флексбокса, чтобы понять это, вы можете проверить это отличная статья для лучшего понимания.

Использование таблицы стилей

если у вас большая кодовая база или вы хотите задать множество свойств своим элементам, напишите наши правила стилей прямо внутри style props сделает наш код более сложным, поэтому React Native дает нам еще один способ, который позволяет нам писать краткий код, используя StyleSheet метод:

Во-первых, обязательно импортируйте StyleSheet из react-native

import { StyleSheet} from 'react-native';

И попробуйте назначить некоторые свойства стиля, используя create метод, который принимает объект свойств.

А затем мы передаем объект стилей нашему компоненту через свойства стиля:

Наш код выглядит более лаконичным с StyleSheet метод и результат все тот же:

Метод укладки, который Реагировать на родной use имеет действительно замечательные функции, которые позволяют выполнять некоторые динамические стили, но они ограничены, особенно когда речь идет о применении некоторых свойств CSS, которые не поддерживаются React Native, например, применение box-shadow к вашим компонентам, которые вам, возможно, придется выполнить следующий :

const Card=()=>(

<View style={styles.card}>

<Text>Hello!</Text>
</View>
)

//our style

const styles=StyleSheer.create({

card:{
width:100,height:120,shadowColor: '#000000', shadowOffset: { width: 0, height: 3 }, shadowRadius: 5, shadowOpacity: 1.0} 
})

А если нам нужно сделать то же самое и добавить тень в CSS:

.card{
width:100px,height:120px,box-shadow:0 0 5 #000000;
}

Это проще сделать с помощью CSS, мы все хотели бы того же в React Native, к сожалению, мы не можем писать CSS непосредственно в React Native. но не беспокойтесь, хорошая новость — поддержка стилевых компонентов React Native 💣

стилизованный компонент в React Native

Да, вы можете использовать стилизованный компонент с Реагировать нативным так что вы можете писать свои стили в React Native так же, как вы пишете обычный CSS. и его легко включить в свой проект, и ему не нужна никакая ссылка, просто запустите следующую команду в корневом каталоге вашего приложения, чтобы установить его:

yarn add styled-components

А затем просто начните использовать его в своих компонентах:

Так здорово 😃. теперь вы можете полностью писать CSS с помощью Реагировать на родной и мы даем это styled-components я предпочитаю использовать styled-components для стилизации своих элементов React Native в тот день, когда я узнал, что они поддерживают React Native, это дает мне больше свободы, чтобы сделать стиль, который я хочу, так легко, и вам лучше использовать styled-components с этого момента и получить преимущества CSS для создания приятного пользовательского интерфейса, он делает ваш код чище, вы можете разделить свои стили в один файл вдали от ваших компонентов, что сделает ваш код более организованным. с другой стороны, вы можете использовать замечательные функции, которые нам предоставляют стилизованные компоненты, такие как создание тем и передача реквизитов, чтобы вы могли создать динамический стиль, подобный следующему:

И вот результат:

Так здорово 💪!!

Иногда вы можете захотеть нарисовать несколько сложных фигур, например, круги и определенный стиль или градиентный фон (Фон градиента CSS не поддерживается в React Native). вы можете подумать об использовании некоторых методов, предоставляемых CSS, например clip-path или любой другой метод, который позволяет вам создавать сложные формы в CSS, к сожалению, эти методы в настоящее время не поддерживаются в React Native, даже если вы используете styled-components который позволяет использовать свойства CSS в React Native в этой ситуации мы должны использовать некоторые альтернативные решения, такие как использование SVG.

Использование react-native-svg для рисования определенных фигур

Реагировать на родное сообществоприносит реагировать родной SVG который позволяет вам использовать SVG в Реагировать нативно. вы можете добавить его в свой проект, используя пряжа или же нпм:

// using yarn

yarn add react-native

// npm 
npm i react-native

Затем обязательно свяжите его, выполнив следующую командную строку:

react-native link react-native-svg

А теперь давайте начнем с него:

Примеры из документации react-native-svg


Примеры выше взяты из Документы react-native-svg

Как видите, вы можете зайти так далеко с реагировать родной SVG в создании определенных форм и градиентных фонов, а также в том, что вы обычно делаете с SVG. вы можете проверить официальные документы чтобы увидеть доступные варианты.

Подведение итогов

Вы все еще можете использовать метод стиля React Native, чтобы сделать то, что вам нужно, но он остается сложным, когда мы хотим создать некоторые сложные стили, поэтому для этого вам нужно использовать некоторые альтернативные инструменты, такие как react-native-svg, для обычного стиля мне нравится использовать стилизованные компоненты, это облегчает мне работу, и я надеюсь, что сообщество React Native предоставит больше поддержки других стилевых методов, которые дадут нам свободу делать вещи легко

Если у вас есть какие-либо дополнения или вопросы, пожалуйста, оставьте комментарий!

Вы всегда можете найти меня на твиттер 🐦


Учить больше

11 библиотек компонентов React Native, которые вы должны знать в 2019 году
_Полезные наборы инструментов React Native UI для использования в вашем следующем приложении!_blog.bitsrc.io

5 инструментов для ускорения разработки в React
_5 инструментов для ускорения разработки вашего приложения React с упором на компоненты._blog.bitsrc.io

11 библиотек анимации JavaScript на 2019 год
_Некоторые из лучших библиотек анимации JS и CSS._blog.bitsrc.io

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *