时间戳

首页 > 解决方案 > 如何更改整个页面的背景？

css - 如何更改整个页面的背景？

问题描述

所以我使用 React native 并且我的大多数页面都有问题，我似乎无法将整个背景颜色更改为所有元素的统一颜色。IE：

import React, { Component } from "react";
import { View, Text, FlatList, ActivityIndicator } from "react-native";
import { List, ListItem, SearchBar } from "react-native-elements";


class Animals extends Component {


  render() {
    return (
      <View
        style={{
          flexDirection: 'row',
          height: 100,
          padding: 20,
          backgroundColor: 'gray'
        }}>
        <Text>Hello World!</Text>
      </View>
    );
  }
}

export default Animals;

这就是我得到的： 在此处输入图像描述

如何使背景颜色适用于整个屏幕？

标签： cssreact-native

解决方案

更改样式以%在适用的地方添加。保持它们关闭将使 html 将其解释为px在您的情况下为 100 像素。https://reactjs.org/docs/dom-elements.html 

import React, { Component } from "react";
import { View, Text, FlatList, ActivityIndicator } from "react-native";
import { List, ListItem, SearchBar } from "react-native-elements";


class Animals extends Component {


  render() {
    return (
      <View
        style={{
          flexDirection: 'row',
          height: '100%',
          padding: '20px',
          backgroundColor: 'gray'
        }}>
        <Text>Hello World!</Text>
      </View>
    );
  }
}

export default Animals;

编辑：更新样式

推荐阅读