React Native TextInput组件闪烁现象

Question

问题描述

React Native （android）TextInput，限制只能输入数字，所以我限制了键盘类型keyboardType="numeric" 。但是android可以使用三方键盘输入，我又用onChangeText事件，replace掉非数字的，但是效果 会闪烁。

代码片段

<TextInput
  style={styles.input}
  keyboardType="numeric"
  value={form.mobile}
  placeholder="请输入手机号"
  placeholderTextColor="rgba(255, 255, 255, 0.20)"
  maxLength={11}
  onChangeText={text => {
    const newText = text.replace(/\D/g, '');
    setForm({ ...form, mobile: newText });
  }}
/>

操作环境 软件版本

操作环境：window
版本：node:18.18.0
         "react": "18.2.0",
         "react-native": "0.73.6",

预期效果

限制用户只能输入纯数字，当输入非数字时，用户按下键盘无效果，不应该出现闪烁现象。

Answer 1

引自免费微信小程序：皆我百晓生

为了解决React Native中TextInput闪烁的问题，您可以尝试使用onKeyPress方法而不是onChangeText。这样，您可以在字符输入之前就过滤掉非数字字符，从而避免闪烁现象。

以下是修改后的代码示例：

import { TextInput, Keyboard } from 'react-native';

const App = () => {
  const [mobile, setMobile] = useState('');

  const handleKeypress = (event) => {
    if (!isNaN(Number(String.fromCharCode(event.nativeEvent.key)))) {
      setMobile(mobile + event.nativeEvent.key);
    } else {
      Keyboard.dismiss();
    }
  };

  return (
    <TextInput
      style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
      keyboardType="numeric"
      value={mobile}
      placeholder="请输入手机号"
      placeholderTextColor="rgba(255, 255, 255, 0.20)"
      maxLength={11}
      onKeyPress={handleKeypress}
    />
  );
};

export default App;

这段代码中，我们创建了一个名为handleKeypress的方法，它会在每次按键时被调用。在这个方法中，我们检查按键的字符是否为数字。如果是数字，我们就将其添加到mobile状态中；如果不是，我们就调用Keyboard.dismiss()方法关闭软键盘，防止非数字字符被输入并导致闪烁。

这种方法的一个潜在问题是，如果用户复制粘贴了一段包含非数字字符的文本，那么这些字符仍然可能短暂地显示在输入框中。为了避免这种情况，您还可以在setMobile函数内部处理这个问题，确保只有数字被添加到mobile状态中。以下是改进版的handleKeypress方法：

const handleKeypress = (event) => {
  const char = String.fromCharCode(event.nativeEvent.key);
  if (!isNaN(Number(char))) {
    setMobile((prevMobile) => prevMobile + char);
  } else {
    Keyboard.dismiss();
  }
};

这样，在每次添加新字符前都会先检查这个字符是否为数字，从而确保mobile状态始终只包含数字。