# @fenadev/react-native-phone-input 中文文档 规范地址：https://npmcn.com/package/%40fenadev/react-native-phone-input/ 版本：0\.4\.1 npm 元数据更新时间：2025-09-27T00:36:30.460Z 中文译文更新时间：2026-11-14T14:15:48.848Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40fenadev/react-native-phone-input 原文对照：https://npmcn.com/package/%40fenadev/react-native-phone-input/?lang=original 项目主页：https://github.com/ffigueroa/react-native-phone-input#readme 源码仓库：https://github.com/ffigueroa/react-native-phone-input ## 关键信息（来自 npm 元数据） - 包体积（解压后）：241 kB，93 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：3 个 - peer 依赖：react \*，react-native \*，react-native-svg \>=13\.0\.0 - 首次发布：2025-09-26T14:42:36.762Z - 最新版本发布：2025-09-27T00:36:30.223Z - 近 30 天下载量：4339（2026-10-15 至 2026-11-13，npm 官方下载统计） - 已发布版本数：6（近 12 个月 0 个） ## 中文简介 简化并优化了带暗主题支持、验证反馈和 SVG 图标的回放本地手机号码输入组件 ## 安装 ```sh npm install @fenadev/react-native-phone-input ``` 也可以使用：`pnpm add @fenadev/react-native-phone-input`、`yarn add @fenadev/react-native-phone-input`、`bun add @fenadev/react-native-phone-input` ## README # 反应-本土-电话输入 [![npm version](https://badge.fury.io/js/@fenadev%2Freact-native-phone-input.svg)](https://badge.fury.io/js/@fenadev/react-native-phone-input) [![License](https://img.shields.io/badge/license-MIT-blue.svg?&kill_cache=1)](https://github.com/ffigueroa/react-native-phone-input/blob/main/LICENSE) `react-native-phone-input` 是一个 **简化和优化** React Introduction Introduction for React Introduction 为输入和验证国际电话号码提供了直观界面. 这种叉子消除了多余的API复杂性,提供了更清洁更可维护的解决方案. ## 🚀 **叉子里有什么新东西** - **简化 API**: 不再重复 `callingCode` - 它自动从 `countryCode` - **性能优化**: O(1) 使用预计算地图的国家代码查看 - **QQ 更好的开发者经验**: 洁净道具 `defaultCountryCode` 财务报告和审定财务报表 `showPrefixCode` - **增强错误处理**:更好的验证和倒置机制 - **QQ 灵活显示**: 控制是否显示调用代码前缀 ### 自动选取特性 ![](https://raw.githubusercontent.com/ffigueroa/react-native-phone-input/main/assets/autopick.gif) 一个在输入电话号码时自动选择正确国家的功能. ### 伪装特征 ![](https://raw.githubusercontent.com/ffigueroa/react-native-phone-input/main/assets/mask.gif) 一个根据国家代码选择右面罩的功能. ## 特征 - 国际电话号码输入器 - 基于国家的自动电话号码格式化 - \* 动态国家和基于类型国家代码的遮罩适应 - 高度定制的外观和外观 - 使用 Google 的 libphone 编号验证电话号码 - 🎨 **黑暗主题支持** 自动调整 - ✅ **视觉验证反馈** 带有检查/ X 图标 - 🎨 **SVG 图标** 自动适应主题 - \* 无障碍支持 - QQ 在类型脚本中写入 - 🚀 **简化 API** 自动调用代码 - ⚡ **业绩得到优化** o(1) 检查和回忆 - 🎛️ **弹性前缀显示** 控制 ## 安装 ```sh npm install @fenadev/react-native-phone-input # or yarn add @fenadev/react-native-phone-input ``` ### 同伴依赖关系 这个图书馆需要 `react-native-svg` 作为同伴的依赖。 如果没有安装的话: ```sh npm install react-native-svg # or yarn add react-native-svg ``` ### 额外设置 对于 **反应-内生-svg**,跟着 [安装指南](https://github.com/software-mansion/react-native-svg#installation) 给你的平台. 对于iOS,你可能需要运行: ```sh cd ios && pod install ``` ## 使用量 1. 导入电话输入组件 : ```jsx import { PhoneInput, isValidNumber } from '@fenadev/react-native-phone-input'; ``` 2. **新简化 API** (建议): ```jsx export default function App() { const [countryCode, setCountryCode] = useState('US'); return ( console.log( 'Phone number:', text, 'isValidNumber:', isValidNumber(text, countryCode) ) } onChangeCountry={(country) => { console.log('Country:', country); setCountryCode(country.cca2); }} /> ); } ``` 3. **不同国家**数字 : ```jsx export default function App() { const [countryCode, setCountryCode] = useState('US'); return ( console.log( 'Phone number:', text, 'isValidNumber:', isValidNumber(text, countryCode) ) } onChangeCountry={(country) => { console.log('Country:', country); setCountryCode(country.cca2); }} /> ); } ``` 4. 高级定制用途 : ```jsx 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 示例** ### 有前缀可见( 默认) ```jsx // Result: Input shows "+56" ``` ### 无前缀 ```jsx // Result: Input shows only the local number ``` ### 多个国家 ```jsx // Automatically uses +52 // Automatically uses +34 // Automatically uses +1 ``` ## 道具 ### 🚀 **新建简化道具** | Prop | 类型 | 说明 | 默认 | | --- | --- | --- | --- | | `defaultCountryCode` | `CountryCode` | **新建**:默认国家代码(例如:"CL","US","MX") | `'US'` | | `showPrefixCode` | `boolean` | **新建**: 是否在输入中显示调用代码前缀 | `true` | ### 📱 **核心道具** | Prop | 类型 | 说明 | 默认 | | --- | --- | --- | --- | | `value` | `string` | 电话号码输入控制值 | `undefined` | | `onChangeText` | `(text: string) => void` | 电话号码更改时召回 | `undefined` | | `onChangeCountry` | `(country: Country) => void` | 选定国家更改时召回 | `undefined` | | `autoFocus` | `boolean` | 安装时自动突出输入焦点 | `false` | | `disabled` | `boolean` | 禁用输入 | `false` | ### 🎨 **样式和自定义道具** | Prop | 类型 | 说明 | 默认 | | --- | --- | --- | --- | | `countryPickerProps` | [`CountryPickerProps`](https://github.com/xcarpentier/react-native-country-picker-modal#props) | 国家采摘方式的道具 | `{}` | | `maskInputProps` | [`MaskInputProps`](https://github.com/CaioQuirinoMedeiros/react-native-mask-input#props) | 口罩输入组件的道具 | `{}` | | `theme` | `Theme` | 组件样式的主题配置 | `{}` | | `hideDropdownIcon` | `boolean` | 设置为真时隐藏下拉箭头图标 | `false` | | `renderCustomDropdown` | [`ReactNode`](https://react.dev/reference/react/Children) | 自定义替换默认下放箭头的组件 | `undefined` | | `flagProps` | `object` | 关于定制国旗的主张 | `{}` | | `dropDownImageProps` | [`ImageProps`](https://reactnative.dev/docs/image#props) | 自定义下拉箭头图像的道具 | `{}` | | `isCallingCodeEditable` | `boolean` | 控制调用代码是否可以编辑 | `true` | | `showValidationIcon` | `boolean` | 在输入旁显示验证图标( 检查/ X) | `false` | | `isValid` | `boolean` | 外部验证状态( 覆盖内部验证) | `undefined` | | `onValidationChange` | `(isValid: boolean) => void` | 验证状态改变时召回 | `undefined` | ### 主题属性 | 财产 | 类型 | 说明 | 默认 | | --- | --- | --- | --- | | `containerStyle` | [`StyleProp`](https://reactnative.dev/docs/view-style-props) | 主容器的样式 | `undefined` | | `textInputStyle` | [`StyleProp`](https://reactnative.dev/docs/text-style-props) | 文本输入样式 | `undefined` | | `codeTextStyle` | [`StyleProp`](https://reactnative.dev/docs/text-style-props) | 调用代码文本的样式 | `undefined` | | `flagButtonStyle` | [`StyleProp`](https://reactnative.dev/docs/view-style-props) | 旗帜按钮的样式 | `undefined` | | `dropDownImageStyle` | [`StyleProp`](https://reactnative.dev/docs/image-style-props) | 下放箭头图像的样式 | `undefined` | | `validationIconStyle` | [`StyleProp`](https://reactnative.dev/docs/view-style-props) | 验证图标的样式 | `undefined` | | `enableDarkTheme` | `boolean` | 启用组件的黑暗主题 | `false` | ## 工具函数 ### `isValidNumber(phoneNumber: string, countryCode: string): boolean` 使用 Google 的 libphone 编号验证特定国家的电话号码 . ```jsx import { isValidNumber } from '@fenadev/react-native-phone-input'; const isValid = isValidNumber('+1234567890', 'US'); ``` ## 依赖关系 此库依赖于以下软件包: - [反应-本土-国家-采取者-模式](https://github.com/xcarpentier/react-native-country-picker-modal) - [反应-内置-任务输入](https://github.com/CaioQuirinoMedeiros/react-native-mask-input) - [google- libphone 号码](https://github.com/ruimarinho/google-libphonenumber) ## 捐款 见 [贡献指南](https://npmcn.com/package/%40fenadev/react-native-phone-input/CONTRIBUTING.md) 学习如何为储存库和发展工作流程作出贡献. ## 开始 - [ ] 输入的外接 - [ ] 添加自定义国家拾取模式 ## 🚀 **业绩改进** 此分叉包括多个性能优化: - **O(1) 国家代码查询**: 即时国家代码分辨率预算地图 - **消除冗余API**: 没有更多的手动 `callingCode` 规格 - **优化国家管理**: 减少不必要的重交 - **更好的错误处理**: 优雅回落和验证 ## 📊 **移徙指南** ### 从原始反应- 原声- 电话输入到此叉 ```jsx // ❌ Original library (redundant) // ✅ This fork (simplified) ``` ### 密钥更改 - **已删除**数字 : `defaultValues.callingCode` - 现在自动导出 - **已删除**数字 : `defaultValues.phoneNumber` - 使用时 `value` 换作道具 - **已添加**数字 : `defaultCountryCode` - 较清洁的国家选择 - **已添加**数字 : `showPrefixCode` - 控制前缀可见度 ## 许可证 本项目根据以下规定获得许可证: [MIT 许可证](https://github.com/ffigueroa/react-native-phone-input/blob/main/LICENSE)。 。 。 . * * * **叉子为**数字 : [反应-内置-电话输入](https://github.com/anday013/react-native-phone-entry) 以 [和yay013号](https://github.com/anday013) 制造的 [创建- 反应- 本土- 图书馆](https://github.com/callstack/react-native-builder-bob) 灵感来自 [反应-本土-手机-数字输入](https://github.com/garganurag893/react-native-phone-number-input) ## 常见问题 ### @fenadev/react-native-phone-input 是什么？ 简化并优化了带暗主题支持、验证反馈和 SVG 图标的回放本地手机号码输入组件 ### 如何安装 @fenadev/react-native-phone-input？ 在项目目录运行 npm install @fenadev/react-native-phone-input，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\*）、react-native（\*）、react-native-svg（\>=13\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @fenadev/react-native-phone-input 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @fenadev/react-native-phone-input 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @fenadev/react-native-phone-input 可以商用吗？ @fenadev/react-native-phone-input 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @fenadev/react-native-phone-input 的下载量有多少？ 根据 npm 官方下载统计，@fenadev/react-native-phone-input 在 2026/10/15 – 2026/11/13 这 30 天内被下载 4,339 次，日均约 145 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @fenadev/react-native-phone-input 还在维护吗？ 最新版本 0\.4\.1 发布于 2025/09/27（1\.1 年前）；至今共发布 6 个版本，其中过去 12 个月发布了 0 个；首次发布于 2025/09/26。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。