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样式

1 个答案: