Question

我正在尝试创建登录屏幕，但是我找不到使背景填充整个屏幕的方法。当我将颜色应用到背景时，它只会到达我在屏幕上显示的最后一个视图。

我也尝试将style = {{flex : 1}}放在KeyboardAvoidingView父对象上，并尝试将布局也包装在<View style={{flex: 1}} >中。

这似乎与KeyboardAvoidingView或ScrollView有关，但是我不确定，我也不知道还能做什么。

import React, { useState } from "react";
import {
  View,
  Text,
  KeyboardAvoidingView,
  TextInput,
  StyleSheet,
  Alert,
  TouchableOpacity,
  ScrollView,
} from "react-native";
import { FontAwesome, Zocial } from "@expo/vector-icons";
import { SafeAreaView } from "react-native-safe-area-context";
import SubmitButton from "../../shared/SubmitButton";
import FocusAwareStatusBar from "../../shared/StatusBar";
import SelectionButton from "../../shared/SelectionButton";

import { loginFirebase } from "../../db/AuthUser";
//import { firebase } from "./Firebase";
const styles = StyleSheet.create({
  background: {
    backgroundColor: "#fafafa",
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: 16,
    flex: 1,
  },

  loginform: {
    alignSelf: "stretch",
    marginTop: 64,
  },

  inputs: {
    fontFamily: "Roboto_400Regular",
    fontSize: 14,
    color: "#000",
    borderBottomColor: "#dcdcdc",
    borderBottomWidth: 0.8,
    paddingBottom: 8,
    paddingLeft: 12,
  },

  loginSocialNetworkContainer: {
    justifyContent: "center",
    alignSelf: "center",
    backgroundColor: "#fff",
    elevation: 6,
    borderRadius: 6,
    marginBottom: 8,
  },

  loginSocialNetwork: {
    alignContent: "center",
    justifyContent: "center",
    width: 232,
    height: 40,
    borderRadius: 2,
  },

  loginSocialNetworkText: {
    fontSize: 12,
    fontFamily: "Roboto_400Regular",
    color: "#f7f7f7",
  },
});

export default function Login({ navigation }) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  return (
    <SafeAreaView style={{flex: 1}}>
      <FocusAwareStatusBar barStyle="light-content" backgroundColor="#88c9bf" />
      <ScrollView style={{flex: 1}} >
        <KeyboardAvoidingView style={styles.background}>
          <View style={styles.loginform}>
            <TextInput
              style={{ ...styles.inputs, marginBottom: 20 }}
              placeholder="Nome de usuário"
              autoCorrect={false}
              onChangeText={(email) => setEmail(email)}
              value={email}
            />

            <TextInput
              style={{ ...styles.inputs, marginBottom: 52 }}
              placeholder="Senha"
              autoCorrect={false}
              secureTextEntry={true}
              onChangeText={(password) => setPassword(password)}
              value={password}
            />
          </View>

          <SubmitButton
            text="ENTRAR"
            onPress={() => {
              loginFirebase(email, password);
            }}
          />

          {/* <TouchableOpacity onPress={() => { loginFirebase(email, password) }}>
            <Text>Press Here</Text>
          </TouchableOpacity> */}

          <View
            style={{ ...styles.loginSocialNetworkContainer, marginTop: 72 }}
          >
            <FontAwesome.Button
              name="facebook-square"
              style={styles.loginSocialNetwork}
              size={17.5}
              iconStyle={{ color: "#f7f7f7" }}
              backgroundColor="#194f7c"
              onPress={() => {}}
            >
              <Text style={styles.loginSocialNetworkText}>
                ENTRAR COM FACEBOOK
              </Text>
            </FontAwesome.Button>
          </View>

          <View style={styles.loginSocialNetworkContainer}>
            <Zocial.Button
              name="googleplus"
              style={styles.loginSocialNetwork}
              size={15}
              iconStyle={{
                color: "#f7f7f7",
                marginRight: 9.3,
                marginLeft: 0.3,
              }}
              backgroundColor="#f25f5c"
              onPress={() => {}}
            >
              <Text
                style={{ ...styles.loginSocialNetworkText, paddingRight: 14 }}
              >
                ENTRAR COM GOOGLE
              </Text>
            </Zocial.Button>
          </View>
        </KeyboardAvoidingView>
      </ScrollView>
    </SafeAreaView>
  );
}

Answer 1

您可以通过在背景样式中使用height: 100vh来填充背景屏幕。 vh覆盖了整个屏幕，与屏幕高度无关。

  background: {
    backgroundColor: "#fafafa",
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: 16,
    flex: 1,
    height: 100vh
  }

Answer 2

您还需要设置：

contentContainerStyle={{flex: 1}}

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

Answer 3

在“父视图样式”中添加flex: 1，flex将定义您的项目如何沿主轴的可用空间“填充”。空间将根据每个元素的flex属性进行划分。在此链接https://reactnative.dev/docs/flexbox

中没有在官方文档中看到

背景不会填满屏幕

3 个答案: