TextInput — 是什么，文本输入和React Native

React Native中的TextInput是什么

TextInput是一个React Native组件，允许用户通过设备键盘输入文本。它是注册表单、搜索栏、消息输入字段以及任何需要用户输入的场景的主要构建块。与Web开发不同，在Web开发中存在单独的input类型（text、email、password、search），而在React Native中，所有这些变体都通过一个具有不同属性的TextInput组件实现。

TextInput支持两种工作模式：受控（通过React状态管理）和非受控（使用ref）。在受控模式下，字段的值存储在组件状态中，并通过onChangeText回调更新。这种方法被推荐用于大多数应用程序，因为它提供了单一事实来源并简化了验证。

根据React Native Handling Text Input, 2024，TextInput会自动适应平台：在iOS上使用原生UITextField，在Android上使用EditText。这确保了自动替换、自动更正和系统菜单（剪切/复制/粘贴）无需额外配置即可正常工作。

TextInput组件的属性和API

TextInput提供了广泛的属性集来管理输入、外观和行为。所有属性分为几个类别：值管理、键盘类型、样式、事件和平台特性。

值管理属性

value — 字段的当前值（用于受控模式）。onChangeText — 每次文本更改时调用的回调。placeholder — 字段为空时显示的提示文本。defaultValue — 非受控模式的初始值。maxLength限制用户可以输入的最大字符数。

TextInput事件

该组件支持onFocus（字段获得焦点）、onBlur（字段失去焦点）、onSubmitEditing（用户按下Enter/Return）、onKeyPress（按键）。onEndEditing事件在失去焦点时编辑完成后调用。这些回调允许实现复杂的验证和表单提交逻辑。

平台属性

在iOS上可用：clearButtonMode（清除按钮）、keyboardAppearance（浅色/深色键盘）、returnKeyType（Return按钮类型）、enablesReturnKeyAutomatically。在Android上可用：textContentType（自动填充）、underlineColorAndroid、inlineImageLeft。secureTextEntry在两个平台上都适用于密码输入。

受控和非受控输入

在React Native中，TextInput可以以两种模式运行。在受控模式下，React管理字段的值：您从状态传递value并通过onChangeText更新它。在非受控模式下，React只初始化字段，而类似DOM的值存储在原生组件内部。

受控TextInput

受控模式适用于所有需要验证、过滤或格式化输入数据的表单。字段状态与React组件状态同步，从而可以完全控制值。

const LoginForm = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    return (
        <View>
            <TextInput
                placeholder="Email"
                value={email}
                onChangeText={setEmail}
                keyboardType="email-address"
                autoCapitalize="none"
            />
            <TextInput
                placeholder="Password"
                value={password}
                onChangeText={setPassword}
                secureTextEntry
                maxLength={32}
            />
        </View>
    );
};

在此示例中，两个字段都使用受控模式。电子邮件具有email-address键盘类型，并关闭了自动大写。密码使用secureTextEntry隐藏输入的字符，并通过maxLength限制为32个字符。

非受控TextInput

非受控模式适用于不需要验证或即时响应输入的简单字段。字段值在提交表单时通过ref获取。

const SimpleSearch = () => {
    const inputRef = useRef(null);

    const handleSearch = () => {
        console.log(inputRef.current.value());
    };

    return (
        <TextInput
            ref={inputRef}
            placeholder="Search..."
            onSubmitEditing={handleSearch}
        />
    );
};

在非受控模式下，组件渲染更快，因为不需要在每次文本更改时同步状态。但是，您将失去实时过滤、格式化或验证输入的能力。

键盘类型和平台特性

TextInput支持不同的键盘类型，这些类型会根据预期的输入格式调整布局。选择正确的键盘类型可以改善用户体验并减少移动设备上的输入错误数量。

在iOS上还有其他类型：numbers-and-punctuation（数字和标点）、twitter、web-search（带语音搜索）。在Android上还有visible-password（显示密码）。正确选择keyboardType是移动应用程序UX的重要方面。

平台特性还包括autoCapitalize（自动大写首单词）、autoCorrect（自动更正）、spellCheck（拼写检查）、textContentType（iOS上的自动填充）。这些属性在每个平台上工作方式不同，需要进行测试。

TextInput的实际示例

让我们来看两个真实场景：用于输入消息的多行字段和带电话号码掩码输入的字段。两者都使用具有不同属性的TextInput来实现所需的行为。

示例1：用于消息的多行字段

对于长文本输入（评论、描述），TextInput通过multiline属性切换到多行模式。在此模式下，字段垂直增长并支持换行。

const MessageInput = ({ onSend }) => {
    const [text, setText] = useState('');

    return (
        <TextInput
            style={styles.input}
            multiline
            numberOfLines={4}
            placeholder="Write a message..."
            value={text}
            onChangeText={setText}
            textAlignVertical="top"
        />
    );
};

multiline属性启用多行模式，numberOfLines以行数设置初始高度。textAlignVertical: 'top'将文本对齐到顶部边缘（默认情况下在Android上，多行TextInput垂直居中文本）。

示例2：带电话号码格式化的字段

对于输入电话号码，通常需要实时格式化。通过将onChangeText与正则表达式结合，可以实现输入掩码。

const PhoneInput = () => {
    const [phone, setPhone] = useState('');

    const formatPhone = (text) => {
        const cleaned = text.replace(/\D/g, '');
        if (cleaned.length <= 11) {
            return cleaned.replace(
                /(\d{1})(\d{3})(\d{3})(\d{2})(\d{2})/,
                '+$1 ($2) $3 $4 $5'
            );
        }
        return cleaned;
    };

    return (
        <TextInput
            keyboardType="phone-pad"
            value={phone}
            onChangeText={(t) => setPhone(formatPhone(t))}
            placeholder="+7 (999) 123 45 67"
            maxLength={20}
        />
    );
};

formatPhone函数删除所有非数字字符，并将号码格式化为标准国际格式。keyboardType: 'phone-pad'显示电话键盘。这种方法改善了电话号码输入的UX并防止格式化错误。