React Native style не отображается с использованием style.container

Question

Я изучаю React Native и применяю некоторые простые стили к View, Но стиль не появляется вообще. Что я делаю неправильно?

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

export default class Header extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text> Hello </Text>
      </View>
    )
  }
}

const styles = {
    container: {
        backgrounColor: '#ddd',
        color: 'red',
        paddingTop: 14
    }
}

Если я изменю это на <View style={{backgroundColor: '#ddd', color: 'red', paddingTop: 14}}> это будет работать, но почему не работает первый подход?

Я использую:

response-native-cli: 2.0.1 и response-native: 0.57.8

Answer 1

Вам нужно использовать StyleSheet для создания стилей JavaScript в реагирующем

Импортируйте таблицу стилей из реактивной системы и измените стиль переменной на:

const styles = StyleSheet.create({
    container: {
        backgrounColor: '#ddd',
        color: 'red',
        paddingTop: 14
    }
});