React native 如何使用react native将textinput格式化为电话号码

当用户键入他们的电话号码时，我希望该号码以电话号码格式显示，如（123）456-7890

我不知道该怎么做，但这是我目前拥有的代码

使用UseState：

const [PNumber,setPNumber] = useState();

在我的文本输入中：

<TextInput
  style={Fonts.Inp}
  keyboardType={'number-pad'}
  placeholder="(604) 333-3333"
  placeholderTextColor='gray'
  maxLength={10}
  onChangeText = {(Text)=> setPNumber(Text)}
/>

setPNumber（Text）}
/>

因此，当前显示为“1234567890”。 我希望它显示为（123）456-7890

_onChangeText = (text) => {
  let formatedNo = this.formatMobileNumber(text);
  this.setState({ phone: formatedNo });
};

formatMobileNumber=(text=> {
  var cleaned = ("" + text).replace(/\D/g, "");
  var match = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/);
  if (match) {
    var intlCode = match[1] ? "+1 " : "",
      number = [intlCode, "(", match[2], ") ", match[3], "-", match[4]].join(
        ""
      );
    return number;
  }
  return text;
}

...
<TextInput       
    maxLength={maxLength}
    keyboardType={keyboardType}
    onChangeText={text => {
       this._onChangeText(text);
    }}
    placeholder={placeholder}
    placeholderTextColor={Constants.APP_TEXT_GRAY_COLOR}
    value={value}
 />
...

\u onChangeText=（text）=>{
让formattedno=this.formatMobileNumber（文本）；
this.setState（{phone:formattedno}）；
};
formatMobileNumber=（文本=>{
var=（“”+文本）。替换（/\D/g，“”）；
var match=cleaned.match（/^（1 |）？（\d{3}）（\d{3}）（\d{4}）$/）；
如果（匹配）{
var intlCode=匹配[1]？“+1”：”，
数字=[intlCode，“（”，匹配[2]，”），匹配[3]，“-”，匹配[4]。加入(
""
);
返回号码；
}
返回文本；
}
...
{
这是一个变化文本（文本）；
}}
占位符={占位符}
占位符textcolor={Constants.APP_TEXT_GRAY_COLOR}
value={value}
/>
...