Fixed russian translation of styling article (react native) (#32913)
* Update index.md * Update index.md
This commit is contained in:
Dzyanis Kurhan
committed by
Randell Dawson
Randell Dawson
parent
242598be65
commit
04d4532ac2
@ -1,8 +1,8 @@
|
||||
---
|
||||
title: Styling
|
||||
localeTitle: стайлинг
|
||||
localeTitle: Стилизация
|
||||
---
|
||||
## Реагировать на родной стиль
|
||||
## React Native - Стилизация
|
||||
|
||||
React Native предоставляет API для создания стилей и стилизации ваших компонентов: [StyleSheet](https://facebook.github.io/react-native/docs/stylesheet) .
|
||||
|
||||
@ -31,27 +31,27 @@ import React, { Component } from 'react';
|
||||
});
|
||||
```
|
||||
|
||||
В то время как регулярные таблицы стилей CSS недействительны, надмножество React Native для CSS очень похоже на традиционный CSS. Многие свойства CSS (например, `color` , `height` , `top` , `right` , `bottom` , `left` ) одинаковы в StyleSheet. Любые свойства CSS, имеющие дефисы (например, `font-size` , `background-color` ), должны быть изменены на camelCase (например, `fontSize` , `backgroundColor` ).
|
||||
В то время как обычные каскадные таблицы стилей невалидны, надмножество CSS в React Native очень похоже на традиционный CSS. Многие свойства CSS (например, `color` , `height` , `top` , `right` , `bottom` , `left` ) одинаковы в StyleSheet. Любые свойства CSS, имеющие дефисы (например, `font-size` , `background-color` ), должны быть изменены на camelCase (например, `fontSize` , `backgroundColor` ).
|
||||
|
||||
Не все свойства CSS существуют в StyleSheet. Так как нет истинной концепции зависания на мобильных устройствах, свойства наведения CSS не существуют в React Native. Вместо этого, React Native предоставляет сенсорные [компоненты,](https://facebook.github.io/react-native/docs/handling-touches#touchables) которые реагируют на события касания.
|
||||
Не все свойства CSS существуют в StyleSheet. Так как нет действительной концепции наведения мыши на мобильных устройствах, свойство CSS `hover` не существуют в React Native. Вместо этого, React Native предоставляет сенсорные [компоненты](https://facebook.github.io/react-native/docs/handling-touches#touchables), которые реагируют на события касания.
|
||||
|
||||
Стили также не наследуются, как в традиционном CSS. В большинстве случаев вы должны объявить стиль каждого компонента.
|
||||
|
||||
### Макеты Flexbox
|
||||
### Flexbox вёрстка
|
||||
|
||||
React Native использует реализацию [flexbox,](https://facebook.github.io/react-native/docs/flexbox) аналогичную веб-стандарту. По умолчанию элементы в представлении будут `display: flex` .
|
||||
React Native использует реализацию [flexbox](https://facebook.github.io/react-native/docs/flexbox), аналогичную веб-стандарту. По умолчанию элементы в view будут иметь значение `display: flex` .
|
||||
|
||||
> Если вы не хотите использовать flexbox, вы также можете упорядочить компоненты React Native посредством `relative` или `absolute` позиционирования.
|
||||
> Если вы не хотите использовать flexbox, вы также можете располагать компоненты React Native посредством `relative` или `absolute` позиционирования.
|
||||
|
||||
Flexbox in React Native по умолчанию - `flexDirection: column` , а не `flex-direction: row` (веб-стандарт). Значение `column` отображает гибкие элементы по вертикали, которые поддерживают мобильные устройства в портретной ориентации.
|
||||
Настройки по умолчанию у флексбокс в React Native - `flexDirection: column` , а не `flex-direction: row` (веб-стандарт). Значение `column` отображает flex элементы по вертикали, что подходит для мобильных устройств в портретной ориентации.
|
||||
|
||||
Чтобы узнать больше о flexbox, посетите [это подробное руководство по CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) и унаследованный подход к обучению с помощью [Flexbox Froggy](http://flexboxfroggy.com/) .
|
||||
Чтобы узнать больше о flexbox, посетите [это подробное руководство по CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) и игрофицированный подход к обучению с помощью [Flexbox Froggy](http://flexboxfroggy.com/) .
|
||||
|
||||
### Стилированные компоненты
|
||||
### Стилизованные компоненты
|
||||
|
||||
Включение большого количества стилей в файл с компонентом не всегда легко поддерживать. Стилируемые компоненты могут решить эту проблему.
|
||||
Включение большого количества стилей в файл с компонентом не всегда легко поддерживать. Стилизованные компоненты могут решить эту проблему.
|
||||
|
||||
Например, компонент Button может использоваться в нескольких местах приложения. Копирование и вставка объекта стиля с каждым экземпляром Button будет неэффективным. Вместо этого создайте повторно используемый стиль Button Button:
|
||||
Например, компонент Button может использоваться в нескольких местах приложения. Копирование и вставка объекта стиля с каждым экземпляром Button будет неэффективным. Вместо этого создайте переиспользуемый и стилизованный Button компонент:
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
@ -93,7 +93,7 @@ import React from 'react';
|
||||
};
|
||||
```
|
||||
|
||||
Компонент Button с стилем может быть легко импортирован и использован в приложении без повторного объявления объекта стиля:
|
||||
Стилизованный компонент Button может быть легко импортирован и использован в приложении без повторного объявления объекта стиля:
|
||||
|
||||
```jsx
|
||||
import React, { Component } from 'react';
|
||||
@ -115,4 +115,4 @@ import React, { Component } from 'react';
|
||||
|
||||
### Библиотеки для стилизации
|
||||
|
||||
Есть несколько популярных библиотек для стиля React Native. Некоторые из них предоставляют функции, подобные [Bootstrap](../../bootstrap/index.md) , включая формы по умолчанию, стили кнопок и параметры макета страницы. Одна из самых популярных библиотек - это [стилизованные компоненты](https://github.com/styled-components/styled-components) . Есть много других, которые вы можете найти на npm и GitHub, чтобы попробовать сами.
|
||||
Существует несколько популярных библиотек для стилизации React Native. Некоторые из них предоставляют функции, подобные [Bootstrap](../../bootstrap/index.md), включая формы по умолчанию, стили кнопок и разные варианты вёрстки. Одна из самых популярных библиотек - это [styled-components](https://github.com/styled-components/styled-components). Есть и много других библиотек, которые вы можете найти для себя на npm и GitHub.
|
||||
|
||||
Reference in New Issue
Block a user