如何在React Native中获取键盘打开前的“键盘高度”？

Question

环境：

React-Native 0.60.4

问题：

我正在开发聊天应用程序。该聊天应用程序有一个表情选择器。表情选择器必须具有与键盘相同的高度。我需要在打开键盘之前获取键盘的高度。我尝试使用键盘监听器，但它们会在键盘打开后才提供高度。我的最终目标是像图片中的那样实现。你如何做到这一点？

示例：

import React, { useState, useEffect, createRef } from "react";
import {
  Keyboard,
  TextInput,
  View,
  EmitterSubscription,
  Button,
  KeyboardAvoidingView,
  StyleSheet
} from "react-native";

const APPROXIMATE_HEIGHT = 360;

const App = () => {
  let inputRef = createRef<TextInput>();

  const [visible, setVisible] = useState(false);
  const [height, setHeight] = useState(APPROXIMATE_HEIGHT);

  useEffect(() => {
    let keyboardDidShowListener: EmitterSubscription;

    keyboardDidShowListener = Keyboard.addListener(
      "keyboardDidShow",
      keyboardDidShow
    );

    return () => {
      if (keyboardDidShowListener) {
        keyboardDidShowListener.remove();
      }
    };
  });

  const keyboardDidShow = (e: any) => {
    setVisible(false);
    setHeight(e.endCoordinates.height); // sets the height after opening the keyboard
  };

  const openEmojiPicker = () => {
    Keyboard.dismiss();
    setVisible(true);
  };

  const openKeyboard = () => {
    setVisible(false);
    inputRef.current!.focus();
  };

  return (
    <KeyboardAvoidingView style={styles.container} behavior="height" enabled>
      <View style={styles.inputToolBar}>
        <Button
          title={visible ? "Open keyboard" : "Open emoji picker"}
          onPress={visible ? openKeyboard : openEmojiPicker}
        />
        <TextInput placeholder="test" ref={inputRef} />
      </View>
      <View style={[styles.emojiPicker, { height: visible ? height : 0 }]} />
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: "absolute",
    bottom: 0,
    left: 0,
    right: 0
  },
  inputToolBar: {
    flexDirection: "row"
  },
  emojiPicker: {
    backgroundColor: "red"
  }
});

export default App;

- Андрей Абрамович

---

尝试在构造函数中添加一个增高器。 - hong developer

我不明白你的意思。 - Андрей Абрамович

Answer 1

我不知道有什么很干净的方法来实现这个，但你可以显示键盘，获取高度，然后用你的视图替换键盘。

- Benjamin Godlove

---

是的，我同意你的观点，这不是非常干净的做法。你有没有注意到你聊天应用程序中的表情符号选择器？ - Андрей Абрамович

是的，但主要用例是先使用键盘，然后在输入过程中的某个时刻再打开表情符号或图像选择器。在输入任何内容之前就打开表情符号或图像选择器的情况非常少见。我们根据用户使用的iOS或Android系统设置了表情符号容器高度的默认值，该默认值有时与实际键盘高度相差几个像素。一旦激活键盘，它就会被覆盖。在正常情况下，在打开常规键盘之前打开表情符号键盘是一个非常不太可能的边缘情况。 - Benjamin Godlove

你甚至可以在键盘至少被激活一次之前隐藏表情符号图标。我还假设您的用户需要注册或以其他方式输入用户名才能首次进入应用程序，在此期间，您可以将键盘高度保存到存储中。 - Benjamin Godlove

当用户登录或注册时，将键盘高度保存到存储中是一个好主意。如果文本输入具有disableFullscreenUI属性，横向模式怎么样？有什么想法吗？ - Андрей Абрамович

我们为我们的聊天应用禁用了横向模式，无法从经验中说话。但是似乎你可以保存两个值，一个用于常规模式，另一个用于横向模式。 - Benjamin Godlove