React Native TextInput限制小数点后8位出现闪烁问题求助

你当前的实现是在用户输入完成后（onChangeText触发）才校验文本，不符合规则时不更新state，导致输入的字符短暂显示后被回滚，从而产生闪烁。要解决这个问题，应该在文本即将改变时就拦截不符合规则的输入，不让无效字符显示出来。

React Native的TextInput提供了shouldChangeTextInRange属性，它会在文本实际更新前触发，返回true允许文本改变，返回false则阻止输入生效。利用这个属性可以彻底避免闪烁问题。

修改后的代码实现 #

import React from 'react';
import {SafeAreaView, StyleSheet, TextInput} from 'react-native';

const TextInputExample = () => {
  const [price, setPrice] = React.useState('');

  const shouldChangeText = (newText) => {
    // 正则规则：允许可选负号，整数部分任意数字，小数部分最多8位（支持.或,作为分隔符）
    const regex = /^-?\d*([.,]\d{0,8})?$/;
    const isValid = newText === "" || regex.test(newText);
    if (isValid) {
      setPrice(newText);
    }
    return isValid;
  };

  return (
    <SafeAreaView>
      <TextInput
        style={styles.input}
        shouldChangeTextInRange={(newText) => shouldChangeText(newText)}
        value={price}
        placeholder="请输入金额"
        keyboardType="numeric"
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    marginTop: 66,
    borderWidth: 1,
    padding: 10,
  },
});

export default TextInputExample;

关键说明 #

• shouldChangeTextInRange在文本更新前触发，直接拦截无效输入，不会让无效字符显示在输入框中，从根源解决闪烁问题。
• 正则表达式保持原有规则，支持负号、整数、最多8位小数，同时兼容.和,作为小数分隔符。
• 受控组件的state更新仅在输入有效时执行，保证输入框内容始终与state同步。

内容的提问来源于stack exchange，提问作者funky-nd