React本机IOS，当TextInput获得焦点时，按钮按下不注册

Posted 2023-05-07

【中文标题】React本机IOS，当TextInput获得焦点时，按钮按下不注册

【英文标题】：React native IOS, when TextInput is focused, button press does not register

【发布时间】：2018-11-03 08:23:20

【问题描述】：

在 react-native 中，我有一个 TextInput 元素，当您单击它时，键盘会根据需要弹出。然而，问题是我有一个箭头按钮，当您将输入输入到 TextInput 时单击该按钮，但第一次触摸按钮或其他任何地方总是只会移除键盘，并且不会在箭头按钮上运行 onPress 函数。我该如何做到这一点，以便当我输入文本并且仍然可以打开键盘时。下一次按下既可以移除键盘，也可以在按钮上执行 onPress 功能。现在用户必须双击。一次移除键盘，然后第二次执行 onPress 函数。

<View style=flex: 1,backgroundColor: "#b70f42", justifyContent: "center", alignItems: "center">
  <View style=position: "relative">
    <TextInput
      style=color: "#FFF", borderBottomColor: "#FFF", borderBottomWidth: 1,fontSize:30,padding: 0, paddingRight: 50,height: 40,width: this.state.width*3/4,shadowOffset:  width: 0, height: 0 , shadowColor: 'black', shadowOpacity: 0.5, shadowRadius: 5
      onChangeText=(passwordInput) => this.showArrow(passwordInput)
      value=this.state.passwordInput
      placeholder="Vart ska du?"
      placeholderTextColor="#FFF"
    />
    <Text style=marginLeft: 175,color:"#FFF">Powered by IBM</Text>
    <TouchableHighlight underlayColor="rgba(255,255,255,0)" style=position: "absolute", top: 0, right: 5, onPress=() => this.onSearchButtonClick()>
      <Animated.Image
        source=require("../../img/right-arrow.png")
        style=width:40, height: 40,opacity: this.state.arrowOpacity>
      </Animated.Image>
    </TouchableHighlight>
  </View>
</View>

【问题讨论】：

嗨，你能提供代码吗，因为我过去也遇到过这个问题。

嘿，谢谢现在添加代码@Prince

能否请您提供整个代码，因为 TextInput 本身无法描述问题的原因。

请分享你是如何编写函数的showArrow

这是整个组件

【参考方案1】：

如果您将View 包裹在ScrollView 中，那么您可以。 ScrollView 有一个名为 keyboardShouldPersistTaps 的属性。

keyboardShouldPersistTaps 确定键盘应该停留的时间 点击后可见。

'never' （默认），在焦点文本输入之外点击 键盘向上关闭键盘。发生这种情况时，孩子 不会收到水龙头。

'always'，键盘不会关闭 自动，并且滚动视图不会捕捉点击，但孩子 的滚动视图可以捕捉水龙头。

'handled'，键盘不会 当孩子处理水龙头时自动关闭，（或 被祖先捕获）。

使用handled，这样即使键盘打开，ScrollView 也可以处理触摸。对于关闭键盘 onPress 的第二个问题，从 react-native 导入 Keyboard 并使用 Keyboard.dismiss() 关闭任何打开的键盘。在你的 onPress 中调用这个函数。

例如，

<ScrollView keyboardShouldPersistTaps='handled' >
  //Other Components

  <Button onPress=() => 
    Keyboard.dismiss();
    //Your logic
  />

</ScrollView>

希望这会有所帮助。

【讨论】：

我遇到了同样的问题，这个答案救了我，我想补充的一件事是，如果您使用嵌套布局，请不要尝试将您的 textInput 包装到滚动视图或您的按钮，如上所述答案，而是尝试查找，如果您在视图层次结构中使用任何滚动视图并在那里添加道具。 scrollView 应该是您的 textInput 的父级。

我在使用带有 TextInput 的 SectionList 组件时遇到了同样的问题。但是在添加了 keyboardShouldPersistTaps="handled" 之后 - 工作得很好。

FlatList 也有这个属性：keyboardShouldPersistTaps