我在一个action sheet里面有一个表单，我试图实现KeyboardAvoidingView，以不覆盖我的Input组件，但什么也没有发生。我不知道到底发生了什么，但是当我使用[tag：behavior=“position]”时，会有一些不同，但是它会使我的组件变形
enter image description here

return (
    <VStack mx={8}>
      <KeyboardAvoidingView
        behavior={Platform.OS == "ios" ? "padding" : "height"}
        keyboardVerticalOffset={Platform.OS == "ios" ? 20 : 0}
      >
        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
          <SafeAreaView>
            <Input
              placeholder="name"
              onChangeText={setName}
              value={name}
              w="full"
            />
            <Input
              placeholder="email"
              onChangeText={setEmail}
              value={email}
              w="full"
            />

            <VStack w="full">
              <SelectList
                placeholder={"Tipo Sanguíneo"}
                inputStyles={{
                  color: "#777272",
                  fontSize: 14,
                  padding: 0,
                }}
                setSelected={(val: string) => setSelected(val)}
                onSelect={() => console.log(selected)}
                data={roles.map((item) => item.name)}
                save="value"
                search={false}
                boxStyles={{
                  borderWidth: 0.5,
                  borderColor: "#80808060",
                  height: 43,
                  borderRadius: 3,
                }}
                dropdownStyles={{
                  bottom: 5,
                  borderWidth: 0.5,
                  borderColor: "#80808060",
                  borderRadius: 3,
                  paddingVertical: 0,
                  margin: 0,
                }}
                dropdownTextStyles={{
                  fontSize: 12,
                  padding: 0,
                }}
              />
            </VStack>

            <HStack my={5} space={3} alignSelf="center">
              <Button title="Cancelar" isOutline w="1/2" />
              <Button
                title="Adicionar"
                w="1/2"
                onPress={() =>
                  signUp({
                    name,
                    email,
                    roleId: selected,
                    bloodCenterId: authData?.bloodCenterId
                      ? authData?.bloodCenterId
                      : "",
                  }).then(childToParent(true))
                }
                textAlign="left"
                alignSelf="center"
              />
            </HStack>
          </SafeAreaView>
        </TouchableWithoutFeedback>
      </KeyboardAvoidingView>
    </VStack>
  );

我试着用flex和一些样式来做，但是它使我的整个容器变形