You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React Native 0.79.4中TextInput输入抖动问题求助

React Native 0.79.4中TextInput输入抖动问题求助

大家好,我在使用React Native 0.79.4开发时遇到了一个头疼的问题:每当我输入不符合规则的数字时,输入框会出现抖动现象——输入的字符先显示出来,瞬间又被移除。而且哪怕是用空的onChangeText={() => {}}也会出现这个情况,想问问有没有人遇到过类似问题或者找到了解决方案?

以下是我的相关代码:

手机号输入处理回调

const handlePhoneNumberChange = useCallback((text: string) => {
  // 只允许输入数字
  let numericText = text.replace(/[^0-9]/g, '');
  // 移除+91或91前缀(仅当存在且长度超过10时)
  if (numericText.startsWith('91') && numericText.length > 10) {
    numericText = numericText.substring(2);
  }
  // 移除以0-5开头的数字(印度手机号无效前缀)
  if (numericText.length > 0 && /^[0-5]/.test(numericText)) {
    numericText = numericText.substring(1);
  }
  // 限制最多10个字符
  if (numericText.length > 10) {
    numericText = numericText.substring(0, 10);
  }
  setPhoneNumber(numericText);
}, []);

TextInput组件代码

<View className="mb-6">
  <View className="flex-row items-center border border-gray-300 overflow-hidden py-1">
    <TextInput 
      style={{ fontSize: 24, color: 'black', fontWeight: 'bold'}}
      placeholderTextColor="#F0F3F5"
      placeholder="0000000000"
      keyboardType="phone-pad"
      value={phoneNumber}
      onChangeText={handlePhoneNumberChange}
      autoFocus={!showOtpInputs}
      maxLength={14} 
    />
  </View>
</View>

我本来是想实现印度手机号的输入校验逻辑,但现在这个输入抖动的问题严重影响了用户体验。哪怕我简化onChangeText的逻辑,甚至用空函数,这个问题依然存在,所以怀疑是不是RN 0.79.4版本本身的TextInput问题?有没有人知道修复方法,或者有没有社区发布的相关补丁可以用?

内容来源于stack exchange

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.07 11:08:07