如何在React Native的TextInput中禁用英语以外的其他输入法

iOS 端实现 #

直接给TextInput设置keyboardType="ascii-capable"，这个属性会强制iOS系统弹出仅支持ASCII字符的英语键盘，用户无法切换到其他语言输入法。搭配autoCorrect={false}和autoCapitalize="none"还能优化密码输入的体验。

修改后的代码：

<TextInput
    style={{ width: "85%", marginStart: 10, fontSize: 12, fontFamily: 'Roboto' }}
    placeholder="Enter your password"
    onChangeText={password => setPassword(password)}
    secureTextEntry={!showPassword}
    keyboardType="ascii-capable"
    autoCorrect={false}
    autoCapitalize="none"
/>

Android 端实现 #

Android端可以通过locale="en"指定优先使用英语输入法，同时设置inputType="textVisiblePassword"适配密码输入场景，限制非英语字符输入。如果需要更严格的字符范围控制，还能添加digits属性指定允许输入的字符集合。

修改后的代码：

<TextInput
    style={{ width: "85%", marginStart: 10, fontSize: 12, fontFamily: 'Roboto' }}
    placeholder="Enter your password"
    onChangeText={password => setPassword(password)}
    secureTextEntry={!showPassword}
    inputType="textVisiblePassword"
    locale="en"
    autoCorrect={false}
    autoCapitalize="none"
    // 可选：严格限制输入字符
    // digits="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()"
/>

跨平台兼容写法 #

结合平台判断，同时适配iOS和Android的配置：

import { Platform } from 'react-native';

<TextInput
    style={{ width: "85%", marginStart: 10, fontSize: 12, fontFamily: 'Roboto' }}
    placeholder="Enter your password"
    onChangeText={password => setPassword(password)}
    secureTextEntry={!showPassword}
    keyboardType={Platform.OS === 'ios' ? 'ascii-capable' : undefined}
    inputType={Platform.OS === 'android' ? 'textVisiblePassword' : undefined}
    locale="en"
    autoCorrect={false}
    autoCapitalize="none"
/>

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