反应-本土-电话输入

react-native-phone-input 是一个 简化和优化 React Introduction Introduction for React Introduction 为输入和验证国际电话号码提供了直观界面. 这种叉子消除了多余的API复杂性,提供了更清洁更可维护的解决方案.

🚀 叉子里有什么新东西

• 简化 API: 不再重复 callingCode - 它自动从 countryCode
• 性能优化: O(1) 使用预计算地图的国家代码查看
• QQ 更好的开发者经验: 洁净道具 defaultCountryCode 财务报告和审定财务报表 showPrefixCode
• 增强错误处理:更好的验证和倒置机制
• QQ 灵活显示: 控制是否显示调用代码前缀

自动选取特性

一个在输入电话号码时自动选择正确国家的功能.

伪装特征

一个根据国家代码选择右面罩的功能.

特征

• 国际电话号码输入器
• 基于国家的自动电话号码格式化
• * 动态国家和基于类型国家代码的遮罩适应
• 高度定制的外观和外观
• 使用 Google 的 libphone 编号验证电话号码
• 🎨 黑暗主题支持 自动调整
• ✅ 视觉验证反馈 带有检查/ X 图标
• 🎨 SVG 图标 自动适应主题
• * 无障碍支持
• QQ 在类型脚本中写入
• 🚀 简化 API 自动调用代码
• ⚡ 业绩得到优化 o(1) 检查和回忆
• 🎛️ 弹性前缀显示 控制

安装

npm install @fenadev/react-native-phone-input

# or

yarn add @fenadev/react-native-phone-input

同伴依赖关系

这个图书馆需要 react-native-svg 作为同伴的依赖。 如果没有安装的话:

npm install react-native-svg

# or

yarn add react-native-svg

额外设置

对于 反应-内生-svg,跟着 安装指南 给你的平台.

对于iOS,你可能需要运行:

cd ios && pod install

使用量

1. 导入电话输入组件 :

import { PhoneInput, isValidNumber } from '@fenadev/react-native-phone-input';

2. 新简化 API (建议):

export default function App() {
  const [countryCode, setCountryCode] = useState<CountryCode>('US');
  return (
    <PhoneInput
      defaultCountryCode="CL"        // 🎯 Just specify the country
      showPrefixCode={true}          // 🎯 Control prefix display
      onChangeText={(text) =>
        console.log(
          'Phone number:',
          text,
          'isValidNumber:',
          isValidNumber(text, countryCode)
        )
      }
      onChangeCountry={(country) => {
        console.log('Country:', country);
        setCountryCode(country.cca2);
      }}
    />
  );
}

3. 不同国家数字 :

export default function App() {
  const [countryCode, setCountryCode] = useState<CountryCode>('US');
  return (
    <PhoneInput
      defaultCountryCode="MX"        // 🇲🇽 Mexico
      showPrefixCode={true}
      onChangeText={(text) =>
        console.log(
          'Phone number:',
          text,
          'isValidNumber:',
          isValidNumber(text, countryCode)
        )
      }
      onChangeCountry={(country) => {
        console.log('Country:', country);
        setCountryCode(country.cca2);
      }}
    />
  );
}

4. 高级定制用途 :

<PhoneInput
  defaultCountryCode="CL"           // 🎯 Simplified country selection
  showPrefixCode={true}              // 🎯 Show/hide calling code prefix
  value="+56 9 1234 5678"
  onChangeText={(text) => console.log('Phone number:', text)}
  onChangeCountry={(country) => console.log('Country:', country)}
  autoFocus={true}
  disabled={false}
  countryPickerProps={{
    withFilter: true,
    withFlag: true,
    withCountryNameButton: true,
  }}
  theme={{
    containerStyle: styles.phoneContainer,
    textInputStyle: styles.input,
    flagButtonStyle: styles.flagButton,
    codeTextStyle: styles.codeText,
    dropDownImageStyle: styles.dropDownImage,
    validationIconStyle: styles.validationIcon,
    enableDarkTheme: false,
  }}
  hideDropdownIcon={false}
  isCallingCodeEditable={false}
  showValidationIcon={true}
  onValidationChange={(isValid) => console.log('Phone number is valid:', isValid)}
/>

🎯 新建 API 示例

有前缀可见( 默认)

<PhoneInput defaultCountryCode="CL" showPrefixCode={true} />
// Result: Input shows "+56"

无前缀

<PhoneInput defaultCountryCode="CL" showPrefixCode={false} />
// Result: Input shows only the local number

多个国家

<PhoneInput defaultCountryCode="MX" />  // Automatically uses +52
<PhoneInput defaultCountryCode="ES" />  // Automatically uses +34
<PhoneInput defaultCountryCode="US" />  // Automatically uses +1

道具

🚀 新建简化道具

📱 核心道具

🎨 样式和自定义道具

主题属性

工具函数

isValidNumber(phoneNumber: string, countryCode: string): boolean

使用 Google 的 libphone 编号验证特定国家的电话号码 .

import { isValidNumber } from '@fenadev/react-native-phone-input';

const isValid = isValidNumber('+1234567890', 'US');

依赖关系

此库依赖于以下软件包:

• 反应-本土-国家-采取者-模式
• 反应-内置-任务输入
• google- libphone 号码

捐款

见 贡献指南 学习如何为储存库和发展工作流程作出贡献.

开始

• 输入的外接
• 添加自定义国家拾取模式

🚀 业绩改进

此分叉包括多个性能优化:

• O(1) 国家代码查询: 即时国家代码分辨率预算地图
• 消除冗余API: 没有更多的手动 callingCode 规格
• 优化国家管理: 减少不必要的重交
• 更好的错误处理: 优雅回落和验证

📊 移徙指南

从原始反应- 原声- 电话输入到此叉

// ❌ Original library (redundant)
<PhoneInput
  defaultValues={{
    countryCode: 'CL',
    callingCode: '+56',    // Redundant!
    phoneNumber: '+56',    // Redundant!
  }}
/>

// ✅ This fork (simplified)
<PhoneInput
  defaultCountryCode="CL"  // Calling code derived automatically
  showPrefixCode={true}     // Control prefix display
/>

密钥更改

• 已删除数字 : defaultValues.callingCode - 现在自动导出
• 已删除数字 : defaultValues.phoneNumber - 使用时 value 换作道具
• 已添加数字 : defaultCountryCode - 较清洁的国家选择
• 已添加数字 : showPrefixCode - 控制前缀可见度

许可证

本项目根据以下规定获得许可证: MIT 许可证。 。 。 .

叉子为数字 : 反应-内置-电话输入 以 和yay013号

制造的 创建- 反应- 本土- 图书馆

灵感来自 反应-本土-手机-数字输入