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被忽略，因为父视图未设置其弹性规则。您可以删除包装顶级视图（如果您肯定只在Epsilon中有一个组件），或者在包装视图中添加弹性规则。

Answer 2

像这样更改，你的flex在子组件中被忽略。所以通过向root添加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);

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

2 个答案: