如何在React Native中通过TextInput的ref动态设置OnPressIn监听属性

无效写法的原因 #

• setNativeProps 仅可修改原生视图对应的原生属性，onPressIn 属于React封装的合成事件回调，不在原生属性范畴内，因此传入后不会生效。
• 直接给ref对象挂载onPressIn属性不会被React内部事件系统识别绑定，自然不会触发对应逻辑。

可行实现方案 #

方案1：ref挂载可变回调（适配你需要通过ref动态修改的需求）

你可以在定义TextInput的组件内，提前在ref上预留可变回调的挂载位，固定绑定onPressIn调用该回调，后续直接修改回调内容即可：

// 定义TextInput的组件内
const inputRef = useRef(null);

<TextInput
  ref={inputRef}
  // 固定绑定onPressIn，内部调用ref上挂载的动态回调
  onPressIn={(e) => {
    inputRef.current?.dynamicPressInHandler?.(e);
  }}
/>

在拿到inputRef的其他组件内，直接修改挂载的回调即可：

// 其他组件内拿到ref后直接赋值修改
inputRef.current.dynamicPressInHandler = () => console.log('ONPRESS TRIGGERED');

方案2：状态驱动修改（符合React单向数据流最佳实践）

如果可以不用ref修改，更推荐用状态管理回调，避免直接操作ref带来的不可预期问题：

// 定义TextInput的组件内
const [pressInCallback, setPressInCallback] = useState(() => () => {});

<TextInput
  onPressIn={pressInCallback}
/>

// 需要修改回调时更新状态即可
setPressInCallback(() => () => console.log('ONPRESS TRIGGERED'));

如果需要跨组件修改该回调，把setPressInCallback通过prop或者Context传递给目标组件即可。

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