情况1：内容较少，通过挤压实现

需求：
我现在有个界面是这样的：

顶部是标题行：请输入您的昵称 
中间是输入框。 
最底部是个提交按钮。 

📱 运行效果：

键盘弹出时，输入框和按钮自动上移；
键盘收起后恢复原位；
iOS / Android 都兼容。

import React from 'react'
import { Keyboard, KeyboardAvoidingView, Platform, SafeAreaView, TouchableWithoutFeedback, View } from 'react-native'
import Button from './components/Btn'

export default function FunctionComponent() {
  return (
    <SafeAreaView className='relative h-full' style={{ paddingTop: top }}>
      {/* 顶部导航栏组件  固定不动 不随键盘弹出而移动 */}
			<RegisterProgressNavbar  />
			{/* 使用KeyboardAvoidingView来处理：键盘弹出时，挤压布局，适合简单布局，但是不支持Scroll滚动。 */}
			<KeyboardAvoidingView
				className='flex-1'
				behavior={'padding'} 
			>
				{/* 点击空白处收起键盘 */}
				<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
          //这里使用 justify-between 让底部按钮位于最底部
          <View className='flex-1 justify-between pt-8'>
            {/* 主体内容 */}
						<View className='items-center'>
								主体内容
						</View>

            {/* 底部按钮  随键盘弹出而移动 保持在键盘上方 不会被键盘遮挡*/}
						<View className='w-full px-4'>
							<Button onPress={() => {}} text='下一步' />
						</View>
					</View>
				</TouchableWithoutFeedback>
			</KeyboardAvoidingView>
		</SafeAreaView>
  )
}

• 底部按钮不能用 绝对定义，都则不生效
• KeyboardAvoidingView 是靠挤压布局（调整容器高度）来避开键盘。适用于 内容不够高，布局简单的场景

情况2：内容较多，通过滚动实现

KeyboardAwareScrollView 自动调整 ScrollView 偏移，确保当前输入框不被键盘遮挡。其实和底部按钮没啥关系。但是，我们可以通过设置bottomOffset，来控制 滚动距离，让底部按钮也不被遮挡。

import Button from '@/components/Btn'
import { SafeAreaView, View } from 'react-native'
import { KeyboardAwareScrollView } from 'react-native-keyboard-controller'

export default function Source() {
	return (
		<SafeAreaView className='relative h-full' style={{ paddingTop: top }}>
			{/* 顶部导航栏组件  固定不动 不随键盘弹出而移动 */}
			<RegisterProgressNavbar />
			{/* 使用KeyboardAwareScrollView来处理：键盘弹出时，发生滚动 适合复杂布局，支持Scroll滚动。 */}
			<KeyboardAwareScrollView
				bottomOffset={125} //单位px，键盘距离当前输入框底部的距离
				//这里使用  contentContainerStyle + flexGrow: 1 + justify-between 让底部按钮位于最底部
				contentContainerStyle={{ flexGrow: 1, justifyContent: 'space-between' }} //控制内容布局 。内容不够撑满屏幕一定要用：flexGrow。
				// style={{ 此处使用 flex:1 height：100% 不生效！ }} //控制 ScrollView 外层容器
				keyboardShouldPersistTaps='handled' //只有当触摸事件被正确处理时才保持键盘打开
			>
				<View className='flex-1 justify-between pt-8'>
					<View className='items-center'>主体内容</View>
					{/* 底部按钮  随键盘弹出而移动 保持在键盘上方 不会被键盘遮挡*/}
					<View className='w-full px-4'>
						<Button text='提交' />
					</View>
				</View>
			</KeyboardAwareScrollView>
		</SafeAreaView>
	)
}

2.1 keyboardShouldPersistTaps

keyboardShouldPersistTaps 是 React Native 中 ScrollView 和相关组件的一个重要属性，用于控制键盘在触摸事件发生时的行为。让我详细解释一下它的取值和含义：
取值和含义

1. “never” (默认值)
   含义：键盘永远不会保持打开状态
   行为：任何触摸都会关闭键盘
   问题：这会导致按钮点击时键盘先关闭，按钮的 onPress 事件可能不会触发
2. “always”
   含义：键盘总是保持打开状态
   行为：触摸任何地方都不会关闭键盘
   问题：用户无法通过点击空白区域关闭键盘，体验不佳
3. “handled”

含义：只有当触摸事件被正确处理时才保持键盘打开
行为：

• 如果触摸的是可交互元素（如按钮、输入框），键盘保持打开
• 如果触摸的是空白区域，键盘关闭
  优势：这是最理想的设置，既允许按钮正常工作，又允许用户关闭键盘