javascript - 为什么 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 在子组件中被忽略了。所以通过将 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);