React Native TextInput如何保留不可删除的默认值+65

要实现TextInput中+65作为不可删除的默认前缀，仅允许用户在其后输入手机号码，可通过以下方式修改代码：

核心思路 #

强制保留+65前缀，对用户输入内容做过滤处理：仅保留数字字符，自动拼接在前缀后方；同时优化光标位置，让用户默认聚焦到前缀之后的输入区域。

修改后的完整代码 #

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

const PhoneInput = () => {
  const [phoneNumberText, setPhoneNumberText] = useState('+65');
  const [phoneNumber, setPhoneNumber] = useState(''); // 存储不带前缀的手机号数字
  const textInputRef = useRef(null);

  // 初始化时将光标定位到+65之后
  useEffect(() => {
    if (textInputRef.current) {
      textInputRef.current.setSelection({ start: 3, end: 3 });
    }
  }, []);

  return (
    <TextInput
      ref={textInputRef}
      keyboardType="numeric"
      value={phoneNumberText}
      onChangeText={(text) => {
        // 过滤所有非数字字符
        const inputDigits = text.replace(/\D/g, '');
        // 强制拼接+65前缀，确保前缀不被删除
        const formattedText = `+65${inputDigits}`;
        setPhoneNumberText(formattedText);
        // 更新纯数字的手机号（方便后续业务使用）
        setPhoneNumber(inputDigits);
      }}
      autoFocus
      style={styles.inputBg}
      underlineColor="#f277c6"
      theme={{
        colors: {
          placeholder: '#B2B4B8',
          text: '#394452',
          primary: '#f277c6',
          underlineColor: '#f277c6',
        },
      }}
      returnKeyType="done"
    />
  );
};

const styles = StyleSheet.create({
  inputBg: {
    // 你的原有样式
  },
});

export default PhoneInput;

代码说明 #

1. 前缀保护：通过replace(/\D/g, '')过滤所有非数字字符，再强制拼接+65，无论用户如何删除或修改输入内容，前缀都会被保留。
2. 光标优化：利用useRef和useEffect，在组件初始化时将光标定位到+65之后（索引3的位置），用户无需手动调整光标位置即可直接输入手机号。
3. 状态分离：phoneNumberText用于控制输入框显示内容，phoneNumber存储纯数字的手机号，方便后续接口调用等业务逻辑使用。

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