react-native 输入框 被软键盘遮挡 （KeyboardAvoidingView）

在React Native中，如果你遇到输入框被软键盘遮挡的问题，可以使用KeyboardAvoidingView组件来解决。这个组件是Keyboard API的一个封装，它能够自动调整其内容的位置，以避免软键盘覆盖住输入框。

以下是一个简单的例子，展示如何使用KeyboardAvoidingView：

import React from 'react';
import { KeyboardAvoidingView, TextInput, StyleSheet } from 'react-native';
 
const MyKeyboardAvoidingComponent = () => {
  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior="padding"
      keyboardVerticalOffset={120}
    >
      <TextInput
        style={styles.input}
        placeholder="请输入内容"
      />
    </KeyboardAvoidingView>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  input: {
    height: 40,
    borderWidth: 1,
    borderColor: '#ddd',
    margin: 10,
    paddingHorizontal: 10,
  },
});
 
export default MyKeyboardAvoidingComponent;

在这个例子中，KeyboardAvoidingView的behavior属性设置为"padding"，这意味着当软键盘弹出时，视图的内容会向上移动。keyboardVerticalOffset属性用于指定视图应该避免被键盘覆盖的距离。

请确保你的TextInput组件包含在KeyboardAvoidingView中，以便它能够正确地工作。