freeCodeCamp/guide/russian/react-native/styling/index.md

title, localeTitle

title	localeTitle
Styling	Стилизация

React Native - Стилизация

React Native предоставляет API для создания стилей и стилизации ваших компонентов: StyleSheet .

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 (например, color , height , top , right , bottom , left ) одинаковы в StyleSheet. Любые свойства CSS, имеющие дефисы (например, font-size , background-color ), должны быть изменены на camelCase (например, fontSize , backgroundColor ).

Не все свойства CSS существуют в StyleSheet. Так как нет действительной концепции наведения мыши на мобильных устройствах, свойство CSS hover не существуют в React Native. Вместо этого, React Native предоставляет сенсорные компоненты, которые реагируют на события касания.

Стили также не наследуются, как в традиционном CSS. В большинстве случаев вы должны объявить стиль каждого компонента.

Flexbox вёрстка

React Native использует реализацию flexbox, аналогичную веб-стандарту. По умолчанию элементы в view будут иметь значение display: flex .

Если вы не хотите использовать flexbox, вы также можете располагать компоненты React Native посредством relative или absolute позиционирования.

Настройки по умолчанию у флексбокс в React Native - flexDirection: column , а не flex-direction: row (веб-стандарт). Значение column отображает flex элементы по вертикали, что подходит для мобильных устройств в портретной ориентации.

Чтобы узнать больше о flexbox, посетите это подробное руководство по CSS-Tricks и игрофицированный подход к обучению с помощью Flexbox Froggy .

Стилизованные компоненты

Включение большого количества стилей в файл с компонентом не всегда легко поддерживать. Стилизованные компоненты могут решить эту проблему.

Например, компонент Button может использоваться в нескольких местах приложения. Копирование и вставка объекта стиля с каждым экземпляром Button будет неэффективным. Вместо этого создайте переиспользуемый и стилизованный Button компонент:

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 может быть легко импортирован и использован в приложении без повторного объявления объекта стиля:

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, включая формы по умолчанию, стили кнопок и разные варианты вёрстки. Одна из самых популярных библиотек - это styled-components. Есть и много других библиотек, которые вы можете найти для себя на npm и GitHub.