React Native 0.65.1使用TextInput报No Command found with name focus怎么办

核心成因 #

• 版本原生侧已知bug：React Native 0.65.1是0.65大版本的早期迭代版本，Android平台存在TextInput原生命令注册遗漏的已知问题，focus、blur这类需要调用原生能力的指令会偶发找不到对应命令的报错，该问题已在0.65.3及后续同大版本的小更新中修复。
• focus调用时机错误：如果你的业务逻辑中存在通过ref调用TextInput的focus()方法的代码，在组件未完成挂载、或调用时组件已经卸载的场景下，就会触发该报错。比如在无依赖项的useEffect初始化回调中直接调用focus，或者在网络请求等异步回调中调用focus时页面已经退出。
• 第三方组件拦截：如果你的TextInput被手势库、第三方表单组件等外层组件包裹，部分旧版本的第三方组件没有正确透传TextInput的原生方法调用，也会导致该报错。
• 组件属性混用：你当前提供的代码存在属性混用问题：受控组件需要用value绑定状态值，defaultValue仅用于非受控组件的初始值设置，两者混用会导致TextInput内部状态异常，间接触发原生方法调用失败。

对应修复方案 #

1. 先修正TextInput的写法，受控组件替换defaultValue为value，如果需要调用focus方法，先正确创建ref并做好调用前的合法性判断：

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

// 组件内部逻辑
const [text, setText] = useState('');
const inputRef = useRef(null);

// 渲染组件
<TextInput
  ref={inputRef}
  style={{height: 40}}
  placeholder="Enter name"
  onChangeText={newText => setText(newText)}
  value={text}
/>

// 需要调用focus的位置先判断合法性
if (inputRef.current) {
  inputRef.current.focus();
}

2. 如果修正写法后仍然报错，可以直接将React Native版本升级到0.65.3及以上的0.65分支稳定版本，无需升大版本即可修复原生侧的bug。
3. 如果使用了第三方库包裹TextInput，将对应第三方库升级到适配React Native 0.65+的正式版本即可。

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