React Native Android端LayoutAnimation与FlatList键盘交互Bug求助

我之前在React Native 0.5x版本开发时也踩过类似的Android端LayoutAnimation和键盘交互的坑，结合你的代码和描述，问题根源应该是LayoutAnimation动画执行期间，TextInput被快速移除，导致Android系统无法正确处理焦点释放和键盘关闭的关联——毕竟iOS的动画与焦点管理逻辑和Android差异很大，所以iOS端没出现问题。

下面给你几个经过验证的解决方案，你可以根据需求选择：

方案1：延迟状态更新，给blur和动画留足时间 #

LayoutAnimation是异步执行的，setState的回调只会在状态更新后触发，但此时动画还在进行中。我们可以在关闭搜索时，先手动让TextInput失焦，再延迟执行状态清空和组件卸载，确保键盘已经正常关闭：

_onPressSearch() { 
  const willShowSearch = !this.state.showSearch;
  LayoutAnimation.easeInEaseOut(); 

  if (!willShowSearch) {
    // 先尝试让输入框失焦
    if (this.refs.searchInput) {
      this.refs.searchInput.blur();
    }
    // 延迟执行状态更新，匹配LayoutAnimation的时长（easeInEaseOut默认约200ms）
    setTimeout(() => {
      this.setState({ 
        showSearch: false,
        searchString: "", 
        filtered: null 
      });
    }, 200);
  } else {
    this.setState({ showSearch: true }, () => {
      this.refs.searchInput.focus();
    });
  }
}

方案2：强制调用键盘关闭API #

直接使用React Native的Keyboard模块强制关闭键盘，跳过组件焦点的依赖，这样即使TextInput被快速移除，键盘也能正常关闭：

首先导入Keyboard模块：

import { Keyboard } from 'react-native';

然后修改点击逻辑：

_onPressSearch() { 
  const willShowSearch = !this.state.showSearch;

  if (!willShowSearch) {
    // 强制关闭键盘
    Keyboard.dismiss();
    LayoutAnimation.easeInEaseOut();
    // 小延迟确保键盘关闭后再更新状态
    setTimeout(() => {
      this.setState({ 
        showSearch: false,
        searchString: "", 
        filtered: null 
      });
    }, 100);
  } else {
    LayoutAnimation.easeInEaseOut();
    this.setState({ showSearch: true }, () => {
      this.refs.searchInput.focus();
    });
  }
}

方案3：调整组件卸载时机，先隐藏再移除 #

不要直接通过条件渲染移除TextInput，而是先通过动画隐藏（比如修改opacity或height），等动画完成后再真正清空状态。这样TextInput在动画期间仍存在，能正确响应blur事件：

修改搜索栏的渲染逻辑：

const searchBar = (
  <View style={{ 
    opacity: this.state.showSearch ? 1 : 0, 
    height: this.state.showSearch ? 'auto' : 0,
    overflow: 'hidden' // 避免隐藏后占空间
  }}>
    <TextInput 
      style={styles.searchInput} 
      ref='searchInput' 
      onChangeText={this._onChangeText.bind(this)} 
      value={this.state.searchString} 
      underlineColorAndroid={Colors.search} 
      maxLength={25} 
      autoCapitalize='none' 
      autoCorrect={false} 
      placeholder={I18n.t('search')} 
      placeholderTextColor={Colors.search} 
      clearButtonMode='never' 
    />
  </View>
);

然后更新点击方法：

_onPressSearch() { 
  const willShowSearch = !this.state.showSearch;
  LayoutAnimation.easeInEaseOut(); 

  if (!willShowSearch) {
    this.refs.searchInput.blur();
    this.setState({ showSearch: false }, () => {
      // 等隐藏动画完成后再清空搜索内容
      setTimeout(() => {
        this.setState({ searchString: "", filtered: null });
      }, 300);
    });
  } else {
    this.setState({ showSearch: true }, () => {
      this.refs.searchInput.focus();
    });
  }
}

这些方案都是针对React Native 0.5x版本Android端的特性做的适配，你可以先试试方案2，因为它最直接，不需要调整太多渲染逻辑。如果还是有问题，再尝试方案1或3。

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