reactjs - React Native TextInput onFocus 不允许其他子组件的onPress

Question

嵌套的 TextInput 组件不允许调用其他组件的 onPress 函数。仅当 TextInput 未获得焦点时，onPress 才能正常工作。

native 版本:0.66.3

这是我的代码

export const Component = (props): JSX.Element {
  const { searchText, onChangeSearchText, onClearSearchText } = props
  const [searchViewFocused, setSearchViewFocused] = useState<boolean>(false)
  const searchIcon = searchViewFocused ? "searchActive" : "searchInactive"
  const cancelIcon = searchViewFocused ? "cancelActive" : "cancelInactive"
  return (
    <View style={styles.searchBoxContainer}>
      <View style={[styles.searchBox, searchViewFocused && styles.searchBarActive]}>
        <Icon styles={styles.searchIcon} icon={searchIcon} />
        <TextInput
          style={styles.searchInput}
          onChangeText={onChangeSearchText}
          value={searchText}
          onFocus={() => setSearchViewFocused(true)}
          onBlur={() => setSearchViewFocused(false)}
          autoCompleteType={"off"}
          numberOfLines={1}
        />
        {searchText !== "" && (
          <Pressable style={styles.clearIcon} onPress={onClearSearchText}>
            <Icon icon={cancelIcon} />
          </Pressable>
        )}
      </View>
    </View>
  )
})

附上图片

预期。

对比

问题

当在焦点状态下按下十字图标时，textInput 没有焦点，而我想要实现的是搜索文本被清除并且输入保持焦点。

注意:当输入未聚焦时，onPress 工作得很好

感谢任何帮助。谢谢!

PS:尝试了 TouchableOpacity 并且我尝试将组件包装在 ScrollView 中以使用 keyboardShouldPersistTaps='handled'，如 SO 答案之一所述，但没有成功。

Answer 1

找到一个解决方法是将整个组件包装到 ScrollView 中并添加 Prop keyboardShouldPersistTaps='handled'

之前，我将 Component 中的 View 设置为 ScrollView，并添加了 keyboardShouldPersistTaps='handled'，但没有成功

export const Component = (props): JSX.Element {
  ...
  return (
    <ScrollView contentContainerStyle={styles.searchBoxContainer} 
                keyboardShouldPersistTaps='handled'>
     ...
    </ScrollView>
  )
})

关键是将整个组件包裹在 ScrollView 中，

这是有效的:

<ScrollView keyboardShouldPersistTaps='handled'>
     <Component {...props}/>
</ScrollView>

我猜这是一个愚蠢的错误，但值得指出!