KeyboardAvoidingView 使 Flexbox 变得混乱

Question

我有以下代码：

  return (
<KeyboardAvoidingView style={{ flex: 1 }} behavior="padding" enabled>
  <View style={style.flex1}>
    <View style={style.imageContainer}>
      <Image
        style={style.image}
        source={require("../../assets/pictures/LoginBackground.png")}
        resizeMode="cover"
      />
      <View style={style.blackOpacity} />
    </View>
    <View style={style.contentContainer}>
      <View style={style.flex1}>
        <Text style={style.welcomeHeader}>{Strings.Welcome}</Text>
      </View>
      <View style={style.fieldsContainer}>
        <LoginInput
          placeholder={Strings.MailPlaceholder}
          keyboardType={"email-address"}
          onChangeText={setEmail}
          styles={style.itemContainer}
        />
        <LoginInput
          placeholder={Strings.PasswordPlaceholder}
          secureTextEntry={true}
          onChangeText={setPassword}
          styles={style.itemContainer}
        />

        <TouchableOpacity
          disabled={isLoginFormEmpty()}
          style={
            isLoginFormEmpty()
              ? [style.loginBtn, style.itemContainer, style.disabled]
              : [style.loginBtn, style.itemContainer]
          }
          onPress={() => submitLogin()}
        >
          <Text style={style.loginBtnText}>{Strings.LoginBtn}</Text>
        </TouchableOpacity>
      </View>
    </View>
  </View>
</KeyboardAvoidingView>

具有以下样式：

const style = StyleSheet.create({
  flex1: {
    flex: 1,
  },
  imageContainer: {
    flex: 1,
  },
  image: {
    width: "100%",
    height: "100%",
  },
  blackOpacity: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: "black",
    opacity: 0.6,
  },
  contentContainer: {
    flex: 2,
    backgroundColor: Colors.opacityBlack,
    alignItems: "center",
  },
  welcomeHeader: {
    fontFamily: getFontFamily("Heebo", "600"),
    textAlign: "right",
    fontSize: scaleFontSize(40),
    marginTop: verticalScale(10),
    color: Colors.white,
  },
  fieldsContainer: {
    flex: 5,
    alignItems: "center",
    flexDirection: "column",
    justifyContent: "space-between",
  },
  loginBtn: {
    justifyContent: "center",
    backgroundColor: Colors.submitPurple,
    marginBottom: verticalScale(120),
  },
  disabled: {
    opacity: 0.5,
  },
  loginBtnText: {
    fontFamily: getFontFamily("Heebo", "500"),
    fontSize: scaleFontSize(20),
    textAlign: "center",
    color: Colors.black,
  },
  itemContainer: {
    width: horizontalScale(250),
    height: verticalScale(40),
    borderRadius: horizontalScale(20),
  },
});

当键盘关闭时，一切看起来都正常：

但是当我打开键盘时，它会使所有输入更接近，并且不会保留每个元素之间的空格：

即使键盘打开，如何保持元素之间的间距？

我尝试更改行为以将 KeyboardAvoidingView 放置或放置在主视图内，但它不起作用。 还尝试将所有内容放入 ScrollView 中，但它破坏了整个屏幕。

Answer 1

最后，我找到了一个有效的解决方案：

那个代码

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding" : "height"}
      style={{ flex: 1 }}
    >
      <View style={style.flex1}>
        <View style={style.flex1}>
          <Image
            style={style.image}
            source={require("../../assets/pictures/LoginBackground.png")}
            resizeMode="cover"
          />
          <View style={style.blackOpacity} />
        </View>
        <View style={style.contentContainer}>
          <Text style={style.welcomeHeader}>{Strings.Welcome}</Text>
          <TextInput
            placeholder={Strings.MailPlaceholder}
            placeholderTextColor={Colors.white}
            style={[style.input, style.itemContainer]}
            value={email}
            onChangeText={setEmail}
            onSubmitEditing={focusPassword}
            returnKeyType="next"
            keyboardType={"email-address"}
          />
          <TextInput
            placeholder={Strings.PasswordPlaceholder}
            placeholderTextColor={Colors.white}
            style={[style.input, style.itemContainer]}
            value={password}
            onChangeText={setPassword}
            onSubmitEditing={submitLogin}
            returnKeyType="done"
            secureTextEntry={true}
            ref={passwordRef}
          />

          <TouchableOpacity
            disabled={!isFieldsFilled}
            style={
              isFieldsFilled
                ? [style.loginBtn, style.itemContainer]
                : [style.loginBtn, style.itemContainer, style.disabled]
            }
            onPress={() => submitLogin()}
          >
            <Text style={style.loginBtnText}>{Strings.LoginBtn}</Text>
          </TouchableOpacity>
        </View>
      </View>
    </KeyboardAvoidingView>
  );

那种风格：

const style = StyleSheet.create({
  flex1: {
    flex: 1,
  },
  image: {
    width: "100%",
    height: "100%",
  },
  blackOpacity: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: "black",
    opacity: 0.6,
  },
  contentContainer: {
    flex: 2,
    backgroundColor: Colors.opacityBlack,
    alignItems: "center",
    paddingBottom: 30,
  },
  welcomeHeader: {
    fontFamily: getFontFamily("Heebo", "600"),
    textAlign: "right",
    fontSize: scaleFontSize(40),
    marginTop: verticalScale(10),
    color: Colors.white,
  },
  loginBtn: {
    justifyContent: "center",
    backgroundColor: Colors.submitPurple,
  },
  disabled: {
    opacity: 0.5,
  },
  loginBtnText: {
    fontFamily: getFontFamily("Heebo", "500"),
    fontSize: scaleFontSize(20),
    textAlign: "center",
    color: Colors.black,
  },
  itemContainer: {
    width: horizontalScale(250),
    height: verticalScale(40),
    borderRadius: horizontalScale(20),
    marginVertical: verticalScale(20),
  },
  input: {
    textAlign: "right",
    fontFamily: getFontFamily("Heebo", "400"),
    fontSize: scaleFontSize(16),
    color: Colors.white,
    paddingVertical: verticalScale(15),
    paddingHorizontal: horizontalScale(20),
    borderWidth: 1,
    borderColor: Colors.opacityGray,
  },
});

屏幕看起来相同，但键盘的行为现在工作得很好。