118 lines
6.1 KiB
Markdown
118 lines
6.1 KiB
Markdown
---
|
||
title: Styling
|
||
localeTitle: стайлинг
|
||
---
|
||
## Реагировать на родной стиль
|
||
|
||
React Native предоставляет API для создания стилей и стилизации ваших компонентов: [StyleSheet](https://facebook.github.io/react-native/docs/stylesheet) .
|
||
|
||
```jsx
|
||
import React, { Component } from 'react';
|
||
import { StyleSheet, View, Text } from 'react-native';
|
||
|
||
export default class App extends Component {
|
||
render () {
|
||
return (
|
||
<View>
|
||
<Text style={styles.header}>I am a header!</Text>
|
||
<Text style={styles.text}>I am some blue text.</Text>
|
||
</View>
|
||
);
|
||
}
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
header: {
|
||
fontSize: 20
|
||
},
|
||
text: {
|
||
color: 'blue'
|
||
}
|
||
});
|
||
```
|
||
|
||
В то время как регулярные таблицы стилей CSS недействительны, надмножество React Native для CSS очень похоже на традиционный 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. В большинстве случаев вы должны объявить стиль каждого компонента.
|
||
|
||
### Макеты Flexbox
|
||
|
||
React Native использует реализацию [flexbox,](https://facebook.github.io/react-native/docs/flexbox) аналогичную веб-стандарту. По умолчанию элементы в представлении будут `display: flex` .
|
||
|
||
> Если вы не хотите использовать flexbox, вы также можете упорядочить компоненты React Native посредством `relative` или `absolute` позиционирования.
|
||
|
||
Flexbox in React Native по умолчанию - `flexDirection: column` , а не `flex-direction: row` (веб-стандарт). Значение `column` отображает гибкие элементы по вертикали, которые поддерживают мобильные устройства в портретной ориентации.
|
||
|
||
Чтобы узнать больше о flexbox, посетите [это подробное руководство по CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) и унаследованный подход к обучению с помощью [Flexbox Froggy](http://flexboxfroggy.com/) .
|
||
|
||
### Стилированные компоненты
|
||
|
||
Включение большого количества стилей в файл с компонентом не всегда легко поддерживать. Стилируемые компоненты могут решить эту проблему.
|
||
|
||
Например, компонент Button может использоваться в нескольких местах приложения. Копирование и вставка объекта стиля с каждым экземпляром Button будет неэффективным. Вместо этого создайте повторно используемый стиль Button Button:
|
||
|
||
```jsx
|
||
import React from 'react';
|
||
import { Text, TouchableOpacity } from 'react-native';
|
||
|
||
const Button = ({ onPress, children }) => {
|
||
const { buttonStyle, textStyle } = styles;
|
||
return (
|
||
<TouchableOpacity onPress={onPress} style={buttonStyle}>
|
||
<Text style={textStyle}>
|
||
{children}
|
||
</Text>
|
||
</TouchableOpacity>
|
||
);
|
||
};
|
||
|
||
export default Button;
|
||
|
||
const styles = {
|
||
textStyle: {
|
||
alignSelf: 'center',
|
||
color: '#336633',
|
||
fontSize: 16,
|
||
fontWeight: '600',
|
||
paddingTop: 10,
|
||
paddingBottom: 10
|
||
},
|
||
buttonStyle: {
|
||
backgroundColor: '#fff',
|
||
borderWidth: 1,
|
||
borderColor: '#336633',
|
||
paddingTop: 4,
|
||
paddingBottom: 4,
|
||
paddingRight: 25,
|
||
paddingLeft: 25,
|
||
marginTop: 10,
|
||
width: 300
|
||
}
|
||
};
|
||
```
|
||
|
||
Компонент Button с стилем может быть легко импортирован и использован в приложении без повторного объявления объекта стиля:
|
||
|
||
```jsx
|
||
import React, { Component } from 'react';
|
||
import { TextInput, View } from 'react-native';
|
||
import Button from './styling/Button';
|
||
|
||
export default class Login extends Component {
|
||
render() {
|
||
return (
|
||
<View>
|
||
<TextInput placeholder='Username or Email' />
|
||
<TextInput placeholder='Password' />
|
||
<Button>Log In</Button>
|
||
</View>
|
||
);
|
||
}
|
||
}
|
||
```
|
||
|
||
### Библиотеки для стилизации
|
||
|
||
Есть несколько популярных библиотек для стиля React Native. Некоторые из них предоставляют функции, подобные [Bootstrap](../../bootstrap/index.md) , включая формы по умолчанию, стили кнопок и параметры макета страницы. Одна из самых популярных библиотек - это [стилизованные компоненты](https://github.com/styled-components/styled-components) . Есть много других, которые вы можете найти на npm и GitHub, чтобы попробовать сами. |