React Native：API响应时无法隐藏数字键盘问题求助

以下是几种可行的解决思路和代码示例：

1. 调整调用时机，确保弹窗渲染后执行 #

API请求是异步操作，直接在请求回调里调用Keyboard.dismiss()可能因为弹窗还没完成渲染导致方法失效。可以在更新弹窗显示状态后加短暂延迟再调用，或者用useEffect监听弹窗状态变化触发：

import { Keyboard, Modal, TextInput, Button, View, Text } from 'react-native';
import { useState, useEffect } from 'react';

const BottomModalComponent = () => {
  const [showModal, setShowModal] = useState(false);
  const [apiData, setApiData] = useState(null);

  const fetchApiData = async () => {
    // 模拟API请求
    const res = await fetch('你的API接口地址');
    const data = await res.json();
    setApiData(data);
    setShowModal(true);
    // 延迟100ms确保弹窗完成渲染
    setTimeout(() => Keyboard.dismiss(), 100);
  };

  // 也可以用useEffect监听弹窗显示状态
  useEffect(() => {
    if (showModal) {
      Keyboard.dismiss();
    }
  }, [showModal]);

  return (
    <>
      <TextInput keyboardType="numeric" placeholder="输入数字" />
      <Button title="获取数据" onPress={fetchApiData} />
      <Modal visible={showModal} presentationStyle="overFullScreen">
        <View style={{ position: 'absolute', bottom: 0, width: '100%', backgroundColor: '#fff', padding: 20 }}>
          <Text>{apiData ? JSON.stringify(apiData) : '无数据'}</Text>
          <Button title="关闭弹窗" onPress={() => setShowModal(false)} />
        </View>
      </Modal>
    </>
  );
};

export default BottomModalComponent;

2. 手动让输入框失焦 #

如果输入框仍持有焦点，可能会阻止键盘关闭。可以通过ref获取输入框实例，调用blur()方法强制失焦：

import { Keyboard, Modal, TextInput, Button, View, Text } from 'react-native';
import { useState, useRef } from 'react';

const BottomModalComponent = () => {
  const [showModal, setShowModal] = useState(false);
  const [apiData, setApiData] = useState(null);
  const inputRef = useRef(null);

  const fetchApiData = async () => {
    const res = await fetch('你的API接口地址');
    const data = await res.json();
    setApiData(data);
    setShowModal(true);
    // 先让输入框失焦
    inputRef.current?.blur();
    Keyboard.dismiss();
  };

  return (
    <>
      <TextInput 
        ref={inputRef}
        keyboardType="numeric" 
        placeholder="输入数字" 
      />
      <Button title="获取数据" onPress={fetchApiData} />
      <Modal visible={showModal} presentationStyle="overFullScreen">
        <View style={{ position: 'absolute', bottom: 0, width: '100%', backgroundColor: '#fff', padding: 20 }}>
          <Text>{apiData ? JSON.stringify(apiData) : '无数据'}</Text>
          <Button title="关闭弹窗" onPress={() => setShowModal(false)} />
        </View>
      </Modal>
    </>
  );
};

export default BottomModalComponent;

3. 排查第三方库冲突 #

如果你的项目中使用了键盘相关第三方库（比如react-native-keyboard-aware-scroll-view），这类库可能会拦截原生Keyboard API的调用，暂时禁用这类库测试是否恢复正常。

内容的提问来源于stack exchange，提问作者cyiasemi