Question

我正在尝试设置视图的背景颜色。我在这里设置了所有内容：

  import React, { Component } from 'react';
  import { View, StyleSheet, Text } from 'react-native';
  export default class Login extends Component{
    render(){
      return(
         <View style={styles.container}>
          <Text>
            Hello.
          </Text>
         </View>
      );
    }
  }

 const styles = StyleSheet.create({
   container:{
       flex: 1,
       flexDirection: 'column',
       alignItems: 'center',
       justifyContent: 'center',
       backgroundColor: 'rgba(79, 81, 140, 1.0)',
     }
 });

问题是视图保持白色。我试图在视图中添加文本以查看它的背景颜色是否正在改变而且确实如此。如何将视图的背景颜色设置为我选择的颜色？我在网上搜索但找不到任何东西..

Answer 1

您的宽度和高度均为0，因此未显示。您需要将宽度和高度设置为某些值才能显示出来。

Answer 2

丹妮的答案是正确的。

flexDirection: 'column'可能会改变高度，但是即使内容宽度有可感知的宽度，它也不会影响宽度。

alignItems不会做任何事情，直到flex容器的宽度大于容器中的内容为止。

react-native中的

flexbox尚不完善，在您的开发中有些地方您希望使用屏幕的实际尺寸来做类似的事情。您可以这样设置登录屏幕的宽度：

const dimScreen= Dimensions.get("screen");
const styles = StyleSheet.create({
   container:{
       flex: 1,
       flexDirection: 'column',
       alignItems: 'center',
       justifyContent: 'center',
       backgroundColor: 'rgba(79, 81, 140, 1.0)',
       width: dimScreen.width,
   }
});

Answer 3

给视图的高度 100% 并删除 flex:1

    <View style={{backgroundColor: colors.cyan, height: '100%'}}>

    </View>

Answer 4

从容器样式中删除flex：1，它将起作用。

Answer 5

您可以尝试在样式代码中添加数字

const dimScreen= Dimensions.get("screen");
const styles = StyleSheet.create({
   container:{
       flex: 1,
       flexDirection: 'column',
       alignItems: 'center',
       justifyContent: 'center',
       backgroundColor: 'rgba(79, 81, 140, 1.0)',
       width: 200,
       height:200
   }
});

FYI用于响应式设计，您可以使用Responsive Design

Answer 6

也许您有一个将登录信息包装在App.js文件中的视图。

backgroundColor无法在View上工作

6 个答案: