在react native中,我有一个TextInput元素,当你点击它时,键盘会根据需要弹出.然而,问题是,我有一个箭头按钮,当您将输入输入文本输入时,您可以单击该按钮,但第一次touch 该按钮或任何其他地方时,总是只会删除键盘,而不会在箭头按钮上运行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>

推荐答案

如果你把你的View包在ScrollView里,那么你可以.ScrollView有一处房产叫keyboardShouldPersistTaps.

键盘应持久点击确定键盘应停留的时间

"never"(默认值),在输入时在聚焦文本外点击

"永远",键盘不会关闭

"已处理",键盘不会

使用handled,这样即使键盘打开,ScrollView也可以处理touch .关于关闭键盘的第二个问题,请从react native导入Keyboard,然后使用Keyboard.dismiss()关闭任何打开的键盘.在onPress中调用此函数.

例如

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

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

</ScrollView>

希望这有帮助.

React-native相关问答推荐

FlatList有时不会在数据更改时重新呈现

React Native 无法下载模板

无法设置文本输入参考

如何在react native 中从 axios 重定向并将数据传递给路由

React Native Axios 通过数组的键过滤

react-native 根据状态隐藏显示按钮

useState 函数似乎阻止了 Animated.timing 事件?

如何在 react-native 中使用 Animated 制作 svg 动画

如何在react-native 中从 FlatList 中删除元素/索引?

在 React Native 上为 android 创建自定义 UI 组件,如何向 JS 发送数据?

如何在react-navigation 中将props传递给screens/components

使用直接在 Windows 中运行的模拟器在 WSL 中运行 React Native

这个 refs 在方法中变得未定义

错误:安装 react-native-elements 后无法识别字体系列 Material Design 图标?

通过带有对象子对象的数组react native 映射 - 与react网络中的工作方式不同?

如何使用特定目标运行 react-native run-ios

如何在 React Native Android 中设置按钮的高度

如何将 React Native Promise 连接到 Swift

React-Native Invariant Violation:元素类型无效

如何在 React Native 中从底部滑入和滑出