当 TextInput 具有焦点时，TouchableOpacity 不可点击 [英] TouchableOpacity unclickable while TextInput has focus

问题描述

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

I have implemented a search bar including a TextInput and a search button. The idea is basically to type what you wish to search for and hit the search button. My problem is that the button is unclickable while the TextInput has focus. Meaning I have to click twice to search, once for the TextInput to lose focus and once to hit the search button.

这是我的代码:

<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 可点击?

Is there any way to make the TouchableOpacity clickable while the TextInput has focus?

推荐答案

有一个属性叫做 keyboardShouldPersistTaps 在 Scrollviews(以及 ListViews)上.

There is a property called keyboardShouldPersistTaps on Scrollviews (and also ListViews).

对于 React-Native 版本 >= 0.41

文档说:

确定点击后键盘何时应保持可见.

Determines when the keyboard should stay visible after a tap.

• 'never'(默认)，当键盘向上时，在焦点文本输入之外轻敲会关闭键盘.发生这种情况时，儿童将不会收到水龙头.

• 'never' (the default), tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When this happens, children won't receive the tap.

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

'always', the keyboard will not dismiss automatically, and the scroll view will not catch taps, but children of the scroll view can catch taps.

'handled'，当点击被孩子处理(或被祖先捕获)时，键盘不会自动关闭.

'handled', the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor).

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

Set it to always or handled to have the expected behaviour.

React-Native 的过时版本 <0.41

文档说:

如果为 false，则在键盘向上时点击焦点文本输入的外部会关闭键盘.当为 true 时，滚动视图不会捕捉点击，并且键盘不会自动关闭.默认值为 false.

When false, tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When true, the scroll view will not catch taps, and the keyboard will not dismiss automatically. The default value is false.

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

Set it to true to have the expected behaviour. You might have to set this prop at different places in your component tree.

这篇关于当 TextInput 具有焦点时，TouchableOpacity 不可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！