React Native TextInput开启secureTextEntry后fontFamily及placeholder异常问题

这个问题是React Native多端原生适配的已知问题：iOS端开启secureTextEntry后，系统会为了密码输入安全强制调用系统默认密码字体，忽略自定义fontFamily配置；Android部分机型也存在类似的原生层优先级覆盖逻辑，placeholder字体异常也是同一逻辑导致的衍生问题。
另外你提供的代码存在属性拼写错误：secureTextEntery应为secureTextEntry，拼写错误会导致属性不生效，建议先修正。

• 方案1：补全字体配置
  确保你使用的riffic字体的所有字重文件都已在项目中正确注册，在style中显式指定和字体文件匹配的fontWeight属性，避免系统找不到对应字重时自动 fallback 到系统字体：

  <TextInput 
    style={{fontFamily:'riffic', fontWeight: 'normal'}} 
    secureTextEntry
    placeholder={'password'}
  />
  

• 方案2：自定义掩码逻辑代替原生安全输入
  完全绕开原生secureTextEntry的限制，自己实现密码掩码逻辑，同时可以100%控制placeholder的样式：

  const [pwd, setPwd] = useState('');
  const [showPwd, setShowPwd] = useState(false);
  
  <TextInput 
    style={{fontFamily:'riffic'}}
    value={showPwd ? pwd : new Array(pwd.length).fill('•').join('')}
    onChangeText={setPwd}
    placeholder={'password'}
  />
  // 可额外加一个显示/隐藏密码的按钮切换showPwd状态即可
  

• 方案3：placeholder异常单独适配
  如果只是placeholder字体异常，除了上述根因修复，也可以自定义占位符组件：当输入框内容为空时，在输入框上层叠加一个和输入框同位置、使用你需要的fontFamily的Text组件作为占位符，有输入内容时隐藏即可。

内容的提问来源于stack exchange，提问作者farzam 2206