为什么backgroundColor不起作用（React Native）？

Question

为什么backgroundColor不会更改我整个手机屏幕的背景颜色？ 每当我运行代码时，我得到的只是一个空白的空白屏幕。

这是我的index.ios.js文件：

import React, {Component} from 'react';
import {AppRegistry, View} from 'react-native';
import Login from './ios/components/login/Login';

export default class Epsilon extends Component {
    render() {
        return (
           <View>
               <Login/>
           </View>
        );
    }
}

AppRegistry.registerComponent('Epsilon', () => Epsilon);

这是我的Login.js文件：

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

export default class Login extends Component {
    render() {
        return(
            <View style={styles.container}>

            </View>
        );
    }
}

const styles = StyleSheet.create({
   container: {
       flex: 1,
       backgroundColor: '#3498db'
   }
});

Answer 1

您的flex: 1被忽略，因为父视图尚未设置它的flex规则。 您可以删除包装的顶级视图（如果您肯定在Epsilon只有一个组件），或者将flex规则添加到包装的视图。

Answer 2

像这样更改它，子组件中将忽略您的flex。因此，通过在根目录中添加flex可以解决此问题/

import React, {Component} from 'react';
import {AppRegistry, View} from 'react-native';
import Login from './ios/components/login/Login';

export default class Epsilon extends Component {
    render() {
        return (
           <View style={{flex:1}}>
               <Login/>
           </View>
        );
    }
}

AppRegistry.registerComponent('Epsilon', () => Epsilon);