在react-native中如果同时存在TextInput和按钮,如果TextInput获得焦点后,直接点击按钮会出现TextInput失去焦点事件触发,导致按钮事件无法触发

解决方法,亲测可用

在ScrollView中添加keyboardShouldPersistTaps=“handled”

以下是官网描述

如果当前界面有软键盘,那么点击 scrollview 后是否收起键盘,取决于本属性的设置。(译注:很多人反应 TextInput 无法自动失去焦点/需要点击多次切换到其他组件等等问题,其关键都是需要将 TextInput 放到 ScrollView 中再设置本属性)

‘never’ (默认值),点击 TextInput 以外的子组件会使当前的软键盘收起。此时子元素不会收到点击事件。
‘always’,键盘不会自动收起,ScrollView 也不会捕捉点击事件,但子组件可以捕获。
‘handled’,当点击事件被子组件捕获时,键盘不会自动收起。这样切换 TextInput 时键盘可以保持状态。多数带有 TextInput 的情况下你应该选择此项。
false,已过时,请使用’never’代替。
true,已过时,请使用’always’代替。

解决问的代码(如果页面中没有ScrollView就加一个吧)

<ScrollView keyboardShouldPersistTaps="handled">
  <View style={styles.formItem}>
    <Textstyle={styles.label}>姓名</Text>
    <TextInput
      style={styles.input}
      placeholder="请输入真实姓名"
      placeholderTextColor={'#A2A2A2'}
      value={formData.personalName || ''}
      maxLength={10}
      onChangeText={text => handleInputChange('personalName', text)}
    />
  </View>
  <TouchableOpacity
    onPress={() => {
      console.log('下一步触发');
      handleNextStep();
    }}>
    <Text style={styles.nextButtonText}>下一步</Text>
  </TouchableOpacity>
</ScrollView >

完美解决我的问题。

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐