键盘避免视图在React Native中不起作用

Question

我尝试了不同的方法，为此，我尝试应用this article，但没有成功。我尝试添加flex: 1，并尝试将其包装在ScrollView中。没有方法起作用。

我认为是因为我在flex: 1中有两个元素，但这是我想要的，我的屏幕一半用于徽标，另一半用于输入。

  const CheckUserByPhone = props => {

  return (
    <View style={styles.loginContainer}>
      <View style={styles.logoContainer}>
        <Image
          style={{ width: "65%", resizeMode: "contain" }}
          source={require("../../assets/images/signscreenslogo.png")}
        />
      </View>
      <View style={styles.inputContainer}>
        <KeyboardAvoidingView
          behavior={Platform.OS === "ios" ? "padding" : null}
          style={{ flex: 1 }}
          keyboardVerticalOffset="10"
        >
          <View>
          <Text style={styles.loginTitleStyle}>Enter your phone number</Text>

            <TextInput
              value={userPhone}
              onChangeText={text => {
                setUserPhone(text);
                console.log(text);
              }}
              style={styles.phoneNumberInput}
            />

            <View style={styles.continueButton}>
              <TouchableOpacity
                onPress={handlePhoneNumber}
                style={styles.fullWidthButton}
              >
                <Text style={styles.fullWidthButtonText}>Continue</Text>
              </TouchableOpacity>
            </View>
          </View>
        </KeyboardAvoidingView>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  loginContainer: {
    flex: 1,
    flexDirection: "column",
    alignContent: "center",
    justifyContent: "flex-start",
    width: "90%",
    marginLeft: "5%"
  },
  logoContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  inputContainer: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "flex-start",
    width: "100%",
    color: "#fff"
  },
  loginTitleStyle: {
    fontSize: 18,
    width: "100%",
    color: Colors.Primary,
    alignSelf: "flex-start",
    fontFamily: "Montserrat-Regular"
  },
  phoneNumberInput: {
    color: "#B32F3A",
    marginTop: 20,
    height: 40,
    width: "100%",
    borderColor: "#000000",
    borderBottomWidth: 1,
    fontFamily: "Montserrat-Regular"
  },
  continueButton: {
    marginTop: 20,
    width: "100%"
  },
  fullWidthButton: {
    backgroundColor: Colors.Primary,
    height: 40,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center"
  },
  fullWidthButtonText: {
    fontSize: 18,
    color: "white",
    fontFamily: "Montserrat-Regular"
  }
});

export default CheckUserByPhone;