使用 style.container 未显示 React Native 样式

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}}> 它会起作用，但为什么第一种方法不起作用？

我正在使用：

react-native-cli: 2.0.1 和本机反应：0.57.8

Answer 1

您需要使用 StyleSheet 在 react-native

中创建 JavaScript 样式

从 react-native 导入 StyleSheet 并将您的变量样式更改为：

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

使用 style.container 未显示 React Native 样式

React Native styling not showing using style.container

reactjs

react-native

react-native-cli

expo