React Native Elements SearchBar缺失focus/blur方法及onClearText调用focus失败问题

问题背景 #

你碰到的是React-Native-Elements的SearchBar组件在1.0.0-beta2版本里缺少focus()和blur()实例方法的问题，导致没法通过ref调用这些方法来控制输入框的焦点状态。

核心解决方案 #

直接把react-native-elements包升级到1.0.0-beta4版本，官方在这个版本里已经补全了SearchBar的focus/blur方法支持。

代码实现示例 #

升级完成后，你可以通过ref获取SearchBar组件实例，然后在需要的时机（比如onClearText回调）调用focus()方法，代码如下：

// SearchBar组件定义
<SearchBar 
  ref={search => this.search = search} 
  onClearText={() => this.handleOnClearText()} 
/>

// 处理清除文本的函数
handleOnClearText = () => {
  if (this.search != null) {
    this.search.focus();
    // 这里可以添加其他你需要的业务逻辑
  }
}

额外注意点 #

• 确保正确完成包版本升级，可以运行npm install react-native-elements@1.0.0-beta4或者yarn add react-native-elements@1.0.0-beta4来操作。
• 升级后建议重启你的React Native项目，避免缓存引发的异常问题。

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