React Native子组件输入框首次点击需双击唤起键盘问题

问题分析 #

这个问题确实和子组件初始渲染时的setState触发时机高度相关——组件初始化阶段的同步状态更新会干扰输入框的原生焦点绑定逻辑，导致首次点击时焦点没有正确传递到原生输入控件，进而无法唤起键盘。

可行修复方案 #

1. 延迟子组件的状态初始化 #

避免在组件挂载时同步执行setState，改用useEffect延迟状态更新，避开输入框的初始化逻辑冲突：

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

const CustomInput = ({ initialValue }) => {
  const [value, setValue] = useState('');

  useEffect(() => {
    // 延迟设置初始值，避开组件挂载时的同步渲染流程
    setValue(initialValue);
  }, [initialValue]);

  return (
    <TextInput
      value={value}
      onChangeText={setValue}
      placeholder="请输入内容"
    />
  );
};

2. 手动管控输入框焦点 #

给子组件的输入框添加ref，通过手动触发焦点/失焦来修正初始状态的异常：

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

const CustomInput = () => {
  const [value, setValue] = useState('');
  const inputRef = useRef(null);

  // 组件挂载后先强制失焦，重置原生控件状态
  useEffect(() => {
    inputRef.current?.blur();
  }, []);

  return (
    <TextInput
      ref={inputRef}
      value={value}
      onChangeText={setValue}
      placeholder="请输入内容"
      onFocus={() => inputRef.current?.focus()}
    />
  );
};

3. 优化父组件的状态传递 #

检查父组件是否在初始化阶段频繁触发setState导致子组件重复渲染，使用useMemo缓存子组件的props，避免无意义的重渲染：

// 父组件示例
import React, { useState, useMemo } from 'react';
import CustomInput from './CustomInput';

const ParentScreen = () => {
  const [formState, setFormState] = useState({ inputVal: '' });

  // 缓存props，仅当依赖项变化时才更新
  const inputProps = useMemo(() => ({
    initialValue: formState.inputVal
  }), [formState.inputVal]);

  return <CustomInput {...inputProps} />;
};

验证步骤 #

修复后按以下流程测试：

• 启动应用后直接点击输入框，确认键盘正常唤起
• 重启应用或切换页面后重复首次点击测试
• 确保后续点击输入框的交互保持正常

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