React Native中使用ScrollView时按钮需点击两次的问题求助

在React Native中使用<ScrollView>且键盘处于打开状态时，点击按钮需要两次操作才能触发响应：第一次点击仅关闭键盘，第二次点击才执行按钮对应操作，两次点击位置均为按钮区域。我同时使用了<KeyboardAvoidingView>，代码如下：

<KeyboardAvoidingView
    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    style={styles.Container}
>
    <ScrollView>
        <Components/>
        <Components/>
        <Components/>
        <Components/>
        <Components/>
        <Button/>
    </ScrollView>
</KeyboardAvoidingView>

已做测试 #

• 移除<ScrollView>后，按钮可一次点击触发，但因组件过多无法在屏幕上完整显示；
• 使用<KeyboardAvoidingView>未改变<ScrollView>的异常行为；
• 尝试使用KeyboardAwareScrollView但无法安装，当前环境版本为react@18.2.0、react-native@0.71.2。

解决方案 #

1. 给ScrollView添加keyboardShouldPersistTaps属性

这是最直接的解决方法，设置keyboardShouldPersistTaps='handled'，让ScrollView在点击可交互组件时不自动收起键盘，而是直接响应点击事件：

<ScrollView keyboardShouldPersistTaps='handled'>
    {/* 子组件 */}
</ScrollView>

2. 手动处理键盘隐藏与按钮点击

如果第一种方法不生效，可以在按钮的点击事件里先手动隐藏键盘，再执行操作：

import { Keyboard } from 'react-native';

const handleButtonClick = () => {
    Keyboard.dismiss();
    // 执行按钮的业务逻辑
};

// 按钮组件
<Button onPress={handleButtonClick} />

3. 调整组件层级结构

尝试将按钮移出ScrollView，放在KeyboardAvoidingView的同级，这样按钮不受ScrollView的键盘交互影响：

<KeyboardAvoidingView
    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    style={styles.Container}
>
    <ScrollView style={styles.scrollView}>
        <Components/>
        <Components/>
        <Components/>
        <Components/>
        <Components/>
    </ScrollView>
    <Button style={styles.button}/>
</KeyboardAvoidingView>

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