如何使本机基础模态与 Android 中的 KeyboardAvoildingView 一起工作？

Question

I try to add KeyboardAvoidingView to the Modal Component. But when i call the keyboard up, the modal doesnt move and still be covered by keyboard.

This is my code: https://snack.expo.dev/@tikkhun/joyous-blueberries

Answer 1

After searching and asking. I get a way to work well: just use behavior: "position"

Here is My example Component:

/**
 * @file: 弹出框
 */
import React, { useRef, useEffect, useState } from 'react';
import { Center, Button, HStack, Input, KeyboardAvoidingView, Modal, Spacer, Text } from 'native-base';
import { useTranslation } from 'react-i18next';

export default function ModalContent({ isOpen, onClose, title, defaultValue, type = 'input', onSave }) {
  const { t } = useTranslation();
  const [value, setValue] = useState();
  const inputRef = useRef(null);
  useEffect(() => {
    // 这里的 setTimeout 是为了让键盘正常弹出
    setTimeout(() => {
      if (inputRef?.current) {
        inputRef.current.focus();
      }
    }, 10);
  });
  useEffect(() => {
    setValue(defaultValue);
    return () => {
      setValue('');
    };
  });

  return (
    <Modal isOpen={isOpen} onClose={onClose}>
      <KeyboardAvoidingView style={{ width: '100%' }} behavior="position">
        <Center>
          <Modal.Content style={{ width: '100%' }}>
            <Modal.Header>
              <HStack space="3" alignItems="center">
                <Text fontSize="md">{title}</Text>
                <Spacer />
                <Button
                  _text={{ fontSize: 'md' }}
                  variant="ghost"
                  onPress={() => {
                    onSave && onSave(value);
                  }}>
                  {t('settings.save')}
                </Button>
              </HStack>
            </Modal.Header>
            <Modal.Body>
              <Input size="2xl" ref={inputRef} defaultValue={value} onChangeText={v => setValue(v)} />
            </Modal.Body>
          </Modal.Content>
        </Center>
      </KeyboardAvoidingView>
    </Modal>
  );
}