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

Question

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

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;

这就是我得到的：

如何将背景颜色设为整个屏幕？

Answer 1

更改样式以在适用的情况下添加%。保持关闭将使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;

编辑：更新样式

Answer 2

您可以使用flex，因此所需的代码为：

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

class Animals extends Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: "gray"
        }}
      >
        <Text>Hello World!</Text>
      </View>
    );
  }
}

export default Animals;

  

另请查看Flex - Docs!