react-native – React本机IOS,当TextInput聚焦时,按下按钮不会

发布时间：2020-12-15 20:14:18 所属栏目：百科来源：网络整理

导读：在react-native中我有一个TextInput元素,当你点击它时,键盘会根据需要弹出.然而问题是,当你输入TextInput的输入时我点击了一个箭头按钮但是第一次触摸按钮或其他任何地方总是只移除键盘并且不在箭头按钮上运行onPress功能.当我输入文本并仍然使用键盘时,如何

在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,0)" style={{position: "absolute",top: 0,right: 5,}} onPress={() => this.onSearchButtonClick()}>
          <Animated.Image 
            source={require("../../img/right-arrow.png")}
            style={{width:40,opacity: this.state.arrowOpacity}}>

          </Animated.Image>
          </TouchableHighlight>
        </View>
    </View>

解决方法

如果将View包装在ScrollView中,则可以. ScrollView有一个名为keyboardShouldPersistTaps的属性.

keyboardShouldPersistTaps 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).

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

例如,

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

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

</ScrollView>

希望这可以帮助.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!