当 TextInput 具有焦点时，TouchableOpacity 不可点击

Posted 2023-04-18

【中文标题】当 TextInput 具有焦点时，TouchableOpacity 不可点击

【英文标题】：TouchableOpacity unclickable while TextInput has focus

【发布时间】：2016-07-18 09:34:18

【问题描述】：

我已经实现了一个搜索栏，包括一个 TextInput 和一个搜索按钮。这个想法基本上是输入您想要搜索的内容并点击搜索按钮。我的问题是当 TextInput 有焦点时按钮是不可点击的。这意味着我必须单击两次才能进行搜索，一次是让 TextInput 失去焦点，一次是点击搜索按钮。

这是我的代码：

<View style=styles.searchView>
    <View style=styles.textInputView>
        <View>
            <TextInput style=styles.textInput
                       placeholder="Sök användare"
                       multiline=false
                       autoFocus=true
                       autoCapitalize="words"
                       underlineColorandroid="transparent" />
        </View>
    </View>
    <TouchableOpacity>
        <View style=styles.searchButton>
            <Image style = styles.searchThumbnail
                       source = require('../images/navigatorThumbnails/search.png')/>
        </View>
    </TouchableOpacity>
</View>

有什么方法可以在 TextInput 具有焦点时使 TouchableOpacity 可点击？

【问题讨论】：

你能把剩下的代码贴出来吗？ onPress 函数和调用者？

我还没有写真正的搜索功能。所以 Touchable 在按下时不会调用任何东西。

你的组件是在 ListView 还是 ScrollView 内？

它在 ListView 中。更具体地说，在标题内部。但是现在在测试时，我发现我在 ListView 的行中遇到了与 Touchables 相同的问题。

【参考方案1】：

在 Scrollviews（以及 ListViews）上有一个名为 keyboardShouldPersistTaps 的属性。

对于 React-Native 版本 >= 0.41

文档说：

确定键盘在点击后何时保持可见。

'never'（默认值），当键盘向上时在焦点文本输入之外点击会关闭键盘。发生这种情况时，孩子们不会收到点击。

'always'，键盘不会自动关闭，滚动视图不会捕捉点击，但滚动视图的子视图可以捕捉点击。

'handled'，当孩子处理敲击（或被祖先捕获）时，键盘不会自动关闭。

将其设置为 always 或 handled 以获得预期的行为。

React-Native 的过时版本

文档说：

当为 false 时，当键盘向上时，在焦点文本输入之外点击会关闭键盘。当为 true 时，滚动视图不会捕捉到点击，键盘也不会自动关闭。默认值为 false。

将其设置为 true 以获得预期的行为。您可能需要在组件树中的不同位置设置此道具。

【讨论】：

成功了。仅供参考，我将道具设置为keyboardShouldPersistTaps="handled"。

@JoshPinter 这个真假之间的“中间地带”随着 v0.41 到来。谢谢，我会更新我的答案

@mbernardeau 很高兴知道。没想到这么新。感谢您更新答案。有趣的是，React Native 的答案很快就过时了，因为它们在几个月后改进了框架。

另外，在使用您的答案时，如果键盘在点击后消失，可能需要在 onPress 中手动调用 Keyboard.dismiss()。