Учебники

React Native — Styling

Сентябрь 19, 2018

Есть несколько способов стилизовать ваши элементы в React Native.

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

В этой главе мы будем использовать таблицу стилей для стилизации.

Контейнер Компонент

В этом разделе мы упростим наш контейнерный компонент из нашей предыдущей главы.

App.js 

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PresentationalComponent from './PresentationalComponent'

export default class App extends React.Component {
   state = {
      myState: 'This is my state'
   }
   render() {
      return (
         <View>
            <PresentationalComponent myState = {this.state.myState}/>
         </View>
      );
   }
}

Презентационный компонент

В следующем примере мы импортируем таблицу стилей . В нижней части файла мы создадим нашу таблицу стилей и присвоим ее константе стилей . Обратите внимание, что наши стили находятся в camelCase, и мы не используем px или% для стилизации.

Чтобы применить стили к нашему тексту, нам нужно добавить свойство style = {styles.myText} к элементу Text .

PresentationalComponent.js 

import React, { Component } from 'react'
import { Text, View, StyleSheet } from 'react-native'

const PresentationalComponent = (props) => {
   return (
      <View>
         <Text style = {styles.myState}>
            {props.myState}
         </Text>
      </View>
   )
}
export default PresentationalComponent

const styles = StyleSheet.create ({
   myState: {
      marginTop: 20,
      textAlign: 'center',
      color: 'blue',
      fontWeight: 'bold',
      fontSize: 20
   }
})

Когда мы запустим приложение, мы получим следующий вывод.

54
Share: