React Native API之—— Keyboard键盘相关

2023-10-07 17:43:51

1. 安装

npm install @react-native-community/keyboard

或

yarn add @react-native-community/keyboard

2. 导入

import Keyboard from '@react-native-community/keyboard';

3. 用法

（1）监听键盘事件

Keyboard.addListener('keyboardDidShow', (e) => {
  // 键盘已显示
});

Keyboard.addListener('keyboardDidHide', (e) => {
  // 键盘已隐藏
});

（2）获取键盘高度

Keyboard.getKeyboardHeight((height) => {
  // 键盘高度为height
});

（3）获取键盘状态

Keyboard.getKeyboardState((state) => {
  // 键盘状态为state
});

（4）关闭键盘

Keyboard.dismiss();

4. 示例

（1）监听键盘是否可见

import React, { useState } from 'react';
import { View, Text, Keyboard } from 'react-native';

const App = () => {
  const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);

  Keyboard.addListener('keyboardDidShow', () => {
    setIsKeyboardVisible(true);
  });

  Keyboard.addListener('keyboardDidHide', () => {
    setIsKeyboardVisible(false);
  });

  return (
    <View>
      <Text>键盘是否可见：{isKeyboardVisible ? '是' : '否'}</Text>
    </View>
  );
};

export default App;

（2）获取键盘高度

import React, { useState } from 'react';
import { View, Text, Keyboard } from 'react-native';

const App = () => {
  const [keyboardHeight, setKeyboardHeight] = useState(0);

  Keyboard.getKeyboardHeight((height) => {
    setKeyboardHeight(height);
  });

  return (
    <View>
      <Text>键盘高度：{keyboardHeight}</Text>
    </View>
  );
};

export default App;

（3）获取键盘状态

import React, { useState } from 'react';
import { View, Text, Keyboard } from 'react-native';

const App = () => {
  const [keyboardState, setKeyboardState] = useState({});

  Keyboard.getKeyboardState((state) => {
    setKeyboardState(state);
  });

  return (
    <View>
      <Text>键盘状态：{JSON.stringify(keyboardState)}</Text>
    </View>
  );
};

export default App;

（4）关闭键盘

import React, { useRef } from 'react';
import { View, Text, TextInput, Keyboard } from 'react-native';

const App = () => {
  const inputRef = useRef();

  const closeKeyboard = () => {
    Keyboard.dismiss();
  };

  return (
    <View>
      <TextInput ref={inputRef} />
      <Button title="关闭键盘" onPress={closeKeyboard} />
    </View>
  );
};

export default App;