求助：关闭键盘时如何让ScrollView内的TextInput失焦

这个问题我之前也碰到过，确实挺烦人的——键盘关上了但输入框还占着焦点，切换的时候得点两次。别担心，咱们用React Native的Keyboard模块就能轻松解决，给你两种靠谱的实现方式：

方法一：监听键盘隐藏事件，主动让所有输入框失焦 #

这是最直接的方案，当系统触发键盘隐藏的事件时，咱们调用API让所有TextInput失去焦点：

1. 首先导入Keyboard模块：

import { Keyboard, ScrollView, KeyboardAvoidingView, View, Text, TextInput, TouchableOpacity } from 'react-native';

2. 在组件类里添加监听和处理逻辑：

class YourNoteComponent extends React.Component {
  componentDidMount() {
    // 监听键盘隐藏事件
    this.keyboardHideListener = Keyboard.addListener(
      'keyboardDidHide',
      this.onKeyboardHide
    );
  }

  componentWillUnmount() {
    // 组件卸载时移除监听，避免内存泄漏
    this.keyboardHideListener.remove();
  }

  onKeyboardHide = () => {
    // 关闭键盘并让所有输入框失焦
    Keyboard.dismiss();
  };

  // 你的saveNote方法和state定义...
  saveNote = () => {
    // 你的保存逻辑
  };

  state = {
    noteTitle: '',
    callType: '',
    noteText: ''
  };

  render() {
    const styles = {
      // 你的样式定义...
    };

    return (
      <ScrollView style={styles.scroll}>
        <KeyboardAvoidingView style={styles.container} behavior='padding' enabled>
          {/* 你的其他组件内容 */}
        </KeyboardAvoidingView>
      </ScrollView>
    );
  }
}

方法二：结合ScrollView的属性优化交互体验 #

除了上面的方法，你还可以给ScrollView加上两个属性，进一步增强用户体验：

<ScrollView 
  style={styles.scroll}
  keyboardDismissMode="on-drag" // 拖拽ScrollView时自动关闭键盘并失焦
  keyboardShouldPersistTaps="handled" // 点击非输入区域时关闭键盘并失焦
>
  {/* 你的KeyboardAvoidingView和其他组件 */}
</ScrollView>

小提示：修复代码里的拼写错误 #

看你的代码里KeyboardAvoidingView的属性写的是styles={styles.container}，应该是style={styles.container}（多写了一个s），这个小错误可能会导致布局异常，记得修正哦~

这样调整之后，不管是按回车键、Android返回键关闭键盘，还是拖拽ScrollView、点击外部区域，输入框都会自动失去焦点，切换的时候点一次就能聚焦其他输入框了。

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