KeyboardAvoidingView搭配ScrollView和多行TextInput时内容被遮挡如何调试？

• 修正基础拼写与属性配置
  你当前代码的KeyboardAvoidingView闭合标签存在拼写错误，写为了KeyboardAvodingView（缺少字母i），首先修正该拼写问题。
  同时该组件必须配置behavior属性和flex:1样式，内部包裹的ScrollView也需要设置flex:1属性，基础示例如下：

import { Platform, KeyboardAvoidingView, ScrollView, TextInput, View } from 'react-native';

const DemoPage = () => {
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={{flex: 1}}
    >
      <ScrollView 
        style={{flex: 1}}
        contentContainerStyle={{paddingBottom: 30}}
        keyboardShouldPersistTaps="handled"
      >
        {/* 其他布局内容 */}
        <TextInput multiline={true} />
        {/* 其他布局内容 */}
        <NextButton />
      </ScrollView>
    </KeyboardAvoidingView>
  )
}

• 校验Android端原生配置
  如果是Android端出现该问题，需要检查项目中android/app/src/main/AndroidManifest.xml文件里activity标签的windowSoftInputMode属性，不要设置为adjustNothing，推荐设置为adjustResize，配置示例：

<activity
  android:name=".MainActivity"
  android:windowSoftInputMode="adjustResize"
  <!-- 其他属性 -->
>

• 适配多行输入框的动态高度变化
  给多行TextInput绑定onContentSizeChange事件，在输入内容高度变化时，主动调用ScrollView的scrollToEnd方法，保证输入光标和底部按钮始终处于可视区域：

const scrollViewRef = useRef(null);
const [inputHeight, setInputHeight] = useState(40);

// 组件内的TextInput配置
<TextInput
  multiline
  onContentSizeChange={(e) => {
    setInputHeight(e.nativeEvent.contentSize.height)
    scrollViewRef.current?.scrollToEnd({animated: true})
  }}
  style={{height: Math.max(40, inputHeight)}}
/>

内容的提问来源于stack exchange，提问作者Stepan Parunashvili