React Native TextInput Onfocus不允许其他儿童组件

Question

嵌套的TextInput组件不允许调用其他组件的OnPress函数。只有当未集中文本输入时，ONPRESS才能正常工作。

React本机版本：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>
  )
})

是预期的图像

。

VS

问题

当将交叉图标按在重点状态上时，文本输入是不重要的，而是我试图实现的目标是清除搜索文本＆amp;输入仍然集中。

注意：当不集中输入时，ONPRESS的工作正常很好

。谢谢！

PS：尝试触摸可接触性＆amp;另外，我已经尝试将滚动浏览中的组件包装在键盘上shouldpersistaps ='andled'，如SO答案之一所述，但没有成功。

Answer 1

找到解决方法的方法是将整个组件包装到scrollView中并添加prop 键盘shouldpersistTaps ='andled

' 键盘shouldpersistTaps ='andled'不起作用的

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

关键是将整个组件包装在滚动浏览中，

这是有效的：

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

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

Answer 2

您正在根据文本输入是否有焦点来设置整个组件的焦点。由于清晰的按钮在文本输入外面，因此按下它会导致组件失去焦点。

一种解决方案是将TextInput实例存储在参考文献中。按下清除按钮时，您可以重新调整文本输入。我在下面复制了您的组件，并添加了一些新行，这些线路在评论中标记。

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