滚动视图内的 onPress 事件需要 React Native 两次点击

Posted 2023-04-18

【中文标题】滚动视图内的 onPress 事件需要 React Native 两次点击

【英文标题】：React Native two time taps required for onPress event inside scrollview

【发布时间】：2019-10-25 11:27:07

【问题描述】：

我在 ScrollView 和 KeyboardAvoidingView 中使用 TextInput，但它需要在键盘打开时点击两次才能提交文本。 对于解决方案，我添加了 keyboardShouldPersistTaps="always" 但它不起作用。

render() 
    return (
        <View style=flex: 1>
            <KeyboardAvoidingView style=flex:1>
            <ScrollView keyboardShouldPersistTaps="always" 
                contentContainerStyle=
                    paddingHorizontal: 10,
                    flexGrow : 1,
                    justifyContent : 'center',
                    alignItems:'center'>
                <View style=backgroundColor:'green', width:'100%', borderRadius:8, overflow:'hidden'>
                    <TextInput style=margin:10/>
                    <TouchableOpacity onPress=() => alert('alert')>
                        <Text>Submit</Text>
                    </TouchableOpacity>
                </View>
            </ScrollView>
            </KeyboardAvoidingView>
        </View>
    )

如何在单击时触发新闻事件？

【问题讨论】：

我将此组件用于另一个页面滚动视图，因此在解决超级滚动视图问题上添加“keyboardShouldPersistTaps="always"”后它无法正常工作

这能回答你的问题吗？ How to avoid having to click TouchableOpacity twice to trigger onPress event?

【参考方案1】：

使用"handled" 代替"always"。 keyboardShouldPersistTaps="handled"

【讨论】：

它有效（keyboardShouldPersistTaps="handled" 与您第一次写的一样，带有“d”）

【参考方案2】：

你必须像这样编写 TouchableOpacity 组件的 onPress 方法

 <TouchableOpacity
onPress=() => alert('Clicked)>
      <Text>Submit</Text>
 </TouchableOpacity>