PasswordInput 密码输入框

ui 层组件,封装"密码 Input + 眼睛切换明文/密文"通用 pattern。caller 只关心 value/onChangeText,组件内部 useState(showPw) 自管。

用法

import { PasswordInput } from '@unif/react-native-design';

<PasswordInput
  value={pw}
  onChangeText={setPw}
  placeholder="请输入新密码"
/>

API

Prop	类型	默认	说明
value	string	—	受控 value
onChangeText	(v: string) => void	—	受控 onChange
placeholder	string?	'请输入密码'	placeholder 文案
testID	string?	—	测试定位;trailing eye Pressable 自动 ${testID}-toggle
inputProps	Partial<TextInputProps>?	—	透传给底层 Input(maxLength 等)。不要传 secureTextEntry,组件自管,会被组件覆盖

设计稿对照

视觉态	规则
leading	<Icon name="lock" size={18} color={c.iconFaint40} />
trailing	Pressable eye toggle,默认 eye-off(密文),切到 eye(明文)
secureTextEntry	默认 true,点 eye 切 false

业务消费

• Login(login-password)
• ForgotPassword(forgot-newPw / forgot-newPw2)
• ChangePassword(change-password-newPw)

a11y

• accessibilityRole="button" 在 eye Pressable
• accessibilityLabel: 当前是明文显示 → "隐藏密码";密文显示 → "显示密码"
• 不加 accessibilityHint:label 已表达切换意图,加 hint 会被 SR 朗读 over-hint(CLAUDE.md a11y 规范)

不要

• ❌ 不要传 inputProps.secureTextEntry(组件自管,会被覆盖)
• ❌ 不要在 caller 自己加 showPw state(组件内部已经有)
• ❌ 不要把 PasswordInput 用在"非密码"场景(它写死了 leading lock + eye toggle 语义)

关联组件

• Input— 底层 Input
• SmsCodeInput— SMS 验证码 Input