背景不会填满屏幕

Question

我正在尝试创建一个登录屏幕，但我找不到一种方法使背景填满整个屏幕。当我将颜色应用于背景时，它只会到达我在屏幕上放置的最后一个视图。我尝试过使用style = {{flex : 1}}KeyboardAvoidingView 父母，并尝试将布局包装在 a 中<View style={{flex: 1}} >。这似乎与 KeyboardAvoidingView 或 ScrollView 有关，但我不确定，也不知道我还能做什么。

Answer 1

height: 100vh您可以通过在背景样式中使用来填充背景屏幕。vh无论屏幕高度如何，都会覆盖整个屏幕。

  background: {

    backgroundColor: "#fafafa",

    justifyContent: "center",

    alignItems: "center",

    paddingHorizontal: 16,

    flex: 1,

    height: 100vh

  }

Answer 2

添加flex: 1到您的父视图样式中，flex 将定义您的项目将如何“填充”沿主轴线的可用空间。空间将根据每个元素的 flex 属性进行划分。

Answer 3

您还需要设置：

contentContainerStyle={{flex: 1}}

它将您的内容包装在内部组件中。