React Native iOS键盘弹出时提交按钮需点击两次问题咨询

嘿，这个问题我之前在项目里也踩过坑！本质是TextInput的焦点状态和点击事件的优先级冲突：当TextInput处于聚焦状态时，第一次点击按钮，React Native会优先处理键盘收起（也就是让TextInput失焦），而不会直接触发按钮的onPress事件；第二次点击时TextInput已经失焦，事件才会正常传递到按钮。

结合你给出的FlatList代码，给你几个可行的解决方案：

方案一：手动管理TextInput焦点，提交时主动失焦 #

在包含TextInput的子组件里，给TextInput添加ref，然后在按钮的onPress事件里先强制让TextInput失焦，再执行提交逻辑：

// 子组件示例
class InputItem extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  handleSubmit = () => {
    // 先让TextInput失焦
    this.inputRef.current?.blur();
    // 执行你的提交逻辑
    this.props.onSubmit();
  };

  render() {
    return (
      <View>
        <TextInput ref={this.inputRef} placeholder="输入内容" />
        <Button title="提交" onPress={this.handleSubmit} />
      </View>
    );
  }
}

这样第一次点击按钮时，会同时处理失焦和提交逻辑，不需要二次点击。

方案二：调整FlatList的keyboardShouldPersistTaps配置 #

你当前用的是keyboardShouldPersistTaps='handled'，可以尝试改成'always'：

<FlatList
  ref={(ref) => { this.flatListRef = ref; }}
  data={this.state.pannelData}
  keyExtractor={item => item.type}
  getItemLayout={this.getItemLayout}
  keyboardShouldPersistTaps='always' // 修改此处配置
  scrollEventThrottle={16}
  ListFooterComponent={() => <FooterComponent/>}
/>

'always'的含义是：无论点击的元素是否处理了点击事件，键盘都会保持打开状态。这时候需要在提交逻辑里手动调用Keyboard.dismiss()收起键盘：

import { Keyboard } from 'react-native';

// 提交函数示例
handleSubmit = () => {
  Keyboard.dismiss();
  // 执行你的提交逻辑，比如发送请求、更新状态等
};

这个方案不需要修改子组件结构，只需要调整FlatList属性和提交逻辑即可。

方案三：用TouchableWithoutFeedback包裹按钮（兜底方案） #

如果前两个方案不生效，可以尝试用TouchableWithoutFeedback包裹按钮，确保点击事件被优先捕获：

import { TouchableWithoutFeedback, Text, View } from 'react-native';

// 子组件里的按钮部分
<TouchableWithoutFeedback onPress={this.handleSubmit} accessible={true}>
  <View style={{ padding: 10, backgroundColor: '#007AFF', borderRadius: 5 }}>
    <Text style={{ color: '#fff', textAlign: 'center' }}>提交</Text>
  </View>
</TouchableWithoutFeedback>

这种方式可以绕过默认的触摸事件拦截，让按钮的点击事件优先被处理。

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