React Native使用numeric键盘时如何实现仅允许输入数字

核心实现思路为：保留keyboardType="numeric"配置优先唤起数字键盘，同时在输入变更回调中做实时字符过滤，拦截所有不符合要求的特殊符号，该方案同时兼容iOS、Android两端所有系统版本的数字键盘，不会出现*、+、#等符号漏拦截的问题。

场景1：仅允许输入整数 #

import { useState } from 'react';
import { TextInput } from 'react-native';

const IntegerInput = () => {
  const [inputValue, setInputValue] = useState('');

  const onInputChange = (text) => {
    // 过滤所有非0-9的字符
    const filteredText = text.replace(/[^0-9]/g, '');
    setInputValue(filteredText);
  };

  return (
    <TextInput
      value={inputValue}
      onChangeText={onInputChange}
      keyboardType="numeric"
      placeholder="请输入整数"
    />
  );
};

export default IntegerInput;

场景2：允许输入带小数点的数字 #

如果需要支持小数输入，可调整过滤逻辑，同时支持限制小数点位数，以下示例默认最多保留2位小数，适配金额类输入场景：

import { useState } from 'react';
import { TextInput } from 'react-native';

const DecimalInput = () => {
  const [inputValue, setInputValue] = useState('');

  const onInputChange = (text) => {
    // 第一步：过滤所有非数字和非小数点的字符
    let filteredText = text.replace(/[^0-9.]/g, '');
    // 第二步：仅保留第一个小数点，避免重复输入
    filteredText = filteredText.replace(/(\.\d*?)\./g, '$1');
    // 第三步：限制小数点后最多2位
    const matchResult = filteredText.match(/^\d*(\.?\d{0,2})/g);
    filteredText = matchResult ? matchResult[0] : '';
    setInputValue(filteredText);
  };

  return (
    <TextInput
      value={inputValue}
      onChangeText={onInputChange}
      keyboardType="numeric"
      placeholder="请输入数字"
    />
  );
};

export default DecimalInput;

额外优化建议 #

• 如果是手机号、身份证号等固定长度的数字输入，可以在过滤逻辑后额外增加长度判断，超过限制长度后直接截断即可
• 该方案为纯JS实现，不需要依赖任何第三方库或原生配置，兼容性和性能都足以覆盖普通输入场景

内容的提问来源于stack exchange，提问作者CODEforDREAM