React Native如何修改数字键盘的标点/符号为+

系统自带的numeric数字键盘无法直接修改默认符号键，以下是两种可行的实现思路：

方案一：系统键盘+输入过滤 #

选择支持输入+的系统键盘类型，同时通过输入过滤逻辑仅保留数字和+，兼顾输入便捷性和内容合法性：

React Native 示例 #

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

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

const handleTextChange = (text) => {
  // 过滤掉数字和+以外的所有字符
  const filteredText = text.replace(/[^0-9+]/g, '');
  setInputValue(filteredText);
};

// 渲染输入框
<TextInput
  value={inputValue}
  onChangeText={handleTextChange}
  keyboardType="numbers-and-punctuation" // 该键盘布局包含+号
  placeholder="请输入数字或+"
/>

iOS 原生示例 #

class ViewController: UIViewController, UITextFieldDelegate {
    @IBOutlet weak var inputTextField: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        inputTextField.delegate = self
        // 选择支持符号输入的数字键盘
        inputTextField.keyboardType = .numbersAndPunctuation
    }
    
    // 过滤非法输入
    func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
        let allowedChars = CharacterSet(charactersIn: "0123456789+")
        return allowedChars.isSuperset(of: CharacterSet(charactersIn: string))
    }
}

方案二：自定义键盘组件 #

如果需要完全匹配「数字键盘布局+替换符号为+」的需求，可以自定义键盘组件，完全控制按键样式和功能：

React Native 简易自定义键盘示例 #

import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';

const CustomKeyboard = ({ onKeyPress }) => {
  // 定义键盘按键，替换默认符号为+
  const keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '+', '0', '⌫'];
  
  const handleKeyTap = (key) => {
    if (key === '⌫') {
      onKeyPress('backspace');
    } else {
      onKeyPress(key);
    }
  };
  
  return (
    <View style={styles.keyboardWrapper}>
      {keys.map(key => (
        <TouchableOpacity
          key={key}
          style={styles.keyButton}
          onPress={() => handleKeyTap(key)}
        >
          <Text style={styles.keyText}>{key}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

// 样式示例
const styles = StyleSheet.create({
  keyboardWrapper: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    backgroundColor: '#f5f5f5',
    padding: 10,
  },
  keyButton: {
    width: '33%',
    height: 60,
    justifyContent: 'center',
    alignItems: 'center',
    marginVertical: 5,
  },
  keyText: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

// 使用时配合输入框处理按键逻辑
// ...

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