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

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

有一个属性叫 keyboardShouldPersistTaps在 ScrollView (以及 ListView )上。

对于 React-Native 版本 >= 0.41

文档说:

Determines when the keyboard should stay visible after a tap.

• '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', the keyboard will not dismiss automatically, and the scroll view will not catch taps, but children of the scroll view can catch taps.

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

将其设置为 always或 handled有预期的行为。

React-Native < 0.41 的过时版本

文档说:

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有预期的行为。您可能必须在组件树中的不同位置设置此 Prop 。