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

【问题标题】：TouchableOpacity unclickable while TextInput has focus当 TextInput 具有焦点时，TouchableOpacity 不可点击
【发布时间】：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 相同的问题。

标签： react-native

【解决方案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()。