Question

我已经实现了一个包含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可点击？

Answer 1

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

对于React-Native版本＆gt; = 0.41

文档说：

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



'从不'（默认设置），在键盘启动时点击聚焦文本输入外部，取消键盘。发生这种情况时，孩子们不会收到水龙头。



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



'处理'，当孩子处理水龙头时（或由祖先捕获），键盘不会自动解除。

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

React-Native的过期版本＆lt; 0.41

文档说：

如果为false，则在键盘启动时点击聚焦文本输入外部会解除键盘。如果为true，则滚动视图将不会捕获水龙头，并且键盘不会自动消失。默认值为false。

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

当TextInput具有焦点

1 个答案: