react native 键盘事件

在React Native中，处理键盘事件通常涉及到监听Keyboard和KeyboardAvoidingView的相关API。以下是一个简单的例子，展示如何使用这些API来处理键盘的显示和隐藏。

import React, { useEffect, useRef } from 'react';
import { Keyboard, KeyboardAvoidingView, TextInput, StyleSheet } from 'react-native';
 
const KeyboardExample = () => {
  const inputRef = useRef(null);
 
  useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      () => {
        inputRef.current.focus();
      }
    );
 
    return () => {
      keyboardDidShowListener.remove();
    };
  }, []);
 
  return (
    <KeyboardAvoidingView 
      behavior="padding" 
      style={styles.container}
      keyboardVerticalOffset={100}
    >
      <TextInput 
        ref={inputRef} 
        style={styles.input} 
        placeholder="Pressing keyboard should focus this input" 
      />
    </KeyboardAvoidingView>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    height: 40,
    width: '100%',
    borderColor: 'gray',
    borderWidth: 1,
    padding: 10,
  },
});
 
export default KeyboardExample;

在这个例子中，我们使用了KeyboardAvoidingView来自动调整视图的位置，以防止键盘遮挡。我们还通过Keyboard.addListener监听了键盘的显示事件，并在键盘出现时使用TextInput组件的focus方法来聚焦输入框。

记得在使用Keyboard和KeyboardAvoidingView时，需要处理好它们的依赖关系，确保它们在你的项目中正确安装和配置。