React Native：关闭模式后如何以编程方式打开键盘？

Question

让我们考虑以下情况：

有一个页面带有 Input 和 Button 打开模式。

在模态中，还有另一个 Button 关闭此模态，聚焦 Input 并显示 Keyboard。

问题：

在按下另一个 Button 关闭模式、聚焦 Input 并显示 Keyboard 之后，会发生以下情况：

模态已关闭。
Input 有焦点。
但 Keyboard 未显示。

这是我的代码：

import React, { useState, useEffect, useRef } from 'react';
import { View } from 'react-native';

import { Button, Input, Overlay } from 'react-native-elements';

const App = () => {
  const [isInputFocused, setInputFocused] = useState(false);
  const [isModalVisible, setModalVisible] = useState(false);

  const inputRef = useRef(null);

  useEffect(() => {
    isInputFocused ? inputRef.current.focus() : inputRef.current.blur();
  }, [isInputFocused]);

  const handleInputFocus = () => setInputFocused(true);
  const handleInputBlur = () => setInputFocused(false);

  const handleOpenModalButtonPress = () => setModalVisible(true);

  const handleFocusInputButtonPress = () => {
    setModalVisible(false);

    setInputFocused(true);
  };

  const handleModalBackdropPress = () => setModalVisible(false);

  return (
    <View style={{ justifyContent: 'space-around', flex: 1, padding: 25 }}>
      <Input
        ref={inputRef}
        onFocus={handleInputFocus}
        onBlur={handleInputBlur}
      />

      <Button
        title="Open Modal"
        onPress={handleOpenModalButtonPress}>
      </Button>

      <Overlay visible={isModalVisible} onBackdropPress={handleModalBackdropPress}>
        <Button title="Focus Input and Open Keyboard" onPress={handleFocusInputButtonPress} />
      </Overlay>
    </View>
  );
};

export default App;

你可以看到直播here。

问题：

是否可以通过编程方式打开键盘？它可能会解决我的问题。

如果没有，有人可以解释我目前的方法所缺少的东西或建议不同的解决方案吗？

提前致谢。

P.S.

react-native-elements 包在这里仅用于样式目的。

Input inherits all TextInput props, Overlay - Modal props, and Button - TouchableWithoutFeedback道具.

所以，我想，它们的行为应该与随意的 React Native TextInput、Modal 和 TouchableWithoutFeedback.
目前，我只在 Android.

Answer 1

看来有两个问题：

如果在解除模态时给予输入焦点，键盘将不会出现 - 焦点需要延迟到解除动画完成，例如。超时：

setTimeout(() => setInputFocused(true), 500);

正如您一样，这仅在第一次尝试时解决了问题 - 重新打开模式后，键盘不再显示。这是因为显示模态会关闭键盘，但至少在 Android 上不会将焦点从输入中移开。再次给它焦点不会有任何效果，键盘也不会出现。在此有限范围内，解决方法是在显示模态时手动放下焦点：

const handleOpenModalButtonPress = () => {
    setModalVisible(true);

    setInputFocused(false);
};

也许有更通用的解决方案。

React Native：关闭模式后如何以编程方式打开键盘？

React Native: How to open the keyboard programmatically after closing a modal?

reactjs

react-native

react-native-elements