In a Modal popup, the bottom input field inside KeyboardAwareScrollView cannot avoid the keyboard.

[Zhoukc-42]

1、依赖三方库:
react-native-keyboard-controller
react-native-reanimated
2、操作，点击弹窗底部的TextInput，查看TextInput是否被键盘遮挡
3、demo:

import React, { useState } from 'react';
import {
  View,
  TextInput,
  StyleSheet,
  Modal,
  Pressable,
  Text,
  SafeAreaView,
} from 'react-native';
import { KeyboardAwareScrollView, KeyboardProvider } from 'react-native-keyboard-controller';

const FormPage = () => {
  const [visible, setVisible] = useState(true);

  return (
    <View style={styles.page}>
      <Modal
        visible={visible}
        animationType="slide"
        transparent={false}
        onRequestClose={() => setVisible(false)}
      >
        <SafeAreaView style={styles.modalRoot}>
          <KeyboardProvider>
            <KeyboardAwareScrollView
              contentContainerStyle={styles.container}
              bottomOffset={20}
              keyboardShouldPersistTaps="handled"
            >
              <TextInput style={styles.input} placeholder="姓名" />
              <TextInput style={styles.input} placeholder="手机号" keyboardType="phone-pad" />
              <TextInput style={styles.input} placeholder="邮箱" keyboardType="email-address" />
              <View style={{ height: 400 }} />
              {/* 模拟很多内容，最后一个输入框在底部 */}
              <TextInput style={styles.input} placeholder="备注（靠近底部）" />
            </KeyboardAwareScrollView>
          </KeyboardProvider>
        </SafeAreaView>
      </Modal>
    </View>
  );
};

export default FormPage;

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  openBtn: {
    backgroundColor: '#1677ff',
    paddingHorizontal: 16,
    paddingVertical: 10,
    borderRadius: 8,
  },
  btnText: {
    color: '#fff',
    fontWeight: '600',
  },
  modalRoot: {
    flex: 1, // 关键：Modal内容必须撑满
    backgroundColor: '#fff000',
  },
  header: {
    height: 52,
    paddingHorizontal: 16,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#ddd',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  title: {
    fontSize: 16,
    fontWeight: '600',
  },
  closeText: {
    color: '#1677ff',
    fontSize: 15,
  },
  container: {
    padding: 16,
    paddingBottom: 24,
    backgroundColor: "pink",
  },
  input: {
    height: 44,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
    paddingHorizontal: 12,
    marginBottom: 12,
  },
});