reactjs - 使用 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 和 react-native：0.57.8

Answer 1

你需要使用 StyleSheet 在 react-native 中创建 JavaScript 样式

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

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