React Native - 文本输入框 (Text Input)

React Native - Text Input

本章演示如何在 React Native 中使用 TextInput 组件，允许用户在您的应用中输入文本。我们将构建一个简单的登录表单示例。

我们将创建一个名为 LoginForm.js 的组件，用于处理用户输入的邮箱和密码。

LoginForm.js 示例

import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet, Alert } from 'react-native';

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

  const handleLogin = () => {
    if (!email || !password) {
      Alert.alert('Error', 'Please enter both email and password.');
      return;
    }
    Alert.alert('Login Info', `Email: ${email}\nPassword: ${password}`);
    // In a real app, you would typically send this to a server for authentication.
    // 在实际应用中，您通常会将此发送到服务器进行身份验证。
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Login</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter your Email"
        placeholderTextColor="#9a9a9a"
        value={email}
        onChangeText={setEmail} // Directly use the setter from useState
        // 直接使用 useState 返回的 setter 函数
        keyboardType="email-address"
        autoCapitalize="none"
        autoCorrect={false}
      />
      <TextInput
        style={styles.input}
        placeholder="Enter your Password"
        placeholderTextColor="#9a9a9a"
        value={password}
        onChangeText={setPassword} // Directly use the setter from useState
        // 直接使用 useState 返回的 setter 函数
        secureTextEntry={true} // Hides password characters
        // secureTextEntry={true} 隐藏输入的密码字符
        autoCapitalize="none"
      />
      <TouchableOpacity style={styles.submitButton} onPress={handleLogin}>
        <Text style={styles.submitButtonText}>Submit</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 30,
  },
  input: {
    height: 50,
    borderColor: '#cccccc',
    borderWidth: 1,
    borderRadius: 8,
    paddingHorizontal: 15,
    marginBottom: 15,
    backgroundColor: '#ffffff',
    fontSize: 16,
  },
  submitButton: {
    backgroundColor: '#007bff',
    paddingVertical: 15,
    borderRadius: 8,
    alignItems: 'center',
    marginTop: 10,
  },
  submitButtonText: {
    color: 'white',
    fontSize: 18,
    fontWeight: 'bold',
  },
});

export default LoginForm;

解释

• State 管理: 我们使用 useState 来管理 email 和 password 的输入值。

• TextInput 属性 (Props):

  • value: 将输入框的值绑定到我们的 state 变量。
  • onChangeText: 一个回调函数（callback），在输入内容改变时接收新的文本。我们直接将 state 的 setter 函数（例如 setEmail）传递给它。
  • placeholder: 在用户输入前显示的占位文本。
  • placeholderTextColor: 占位文本的颜色。
  • keyboardType: 指定显示的键盘类型（例如 "email-address" 表示邮箱键盘，"numeric" 表示数字键盘）。
  • autoCapitalize: 控制自动大写（例如 "none" 不自动大写，"sentences" 句子开头大写）。
  • secureTextEntry: 如果设置为 true，则隐藏输入的文本（适用于密码框）。
  • autoCorrect: 启用或禁用自动更正。

• 处理提交: 当按下 TouchableOpacity（此处作为按钮）时，会调用 handleLogin 函数。该函数会弹出一个 alert，显示输入的邮箱和密码。在实际应用中，您会在此处实现认证或数据提交的逻辑。

运行此组件时，您将看到两个输入框（用于邮箱和密码）和一个提交按钮。当您输入时，state 会随之更新。按下 ‘Submit’ 将显示一个包含输入值的 alert。

文本输入的最佳实践

• 受控组件 (Controlled Components): 通过使用 value 和 onChangeText 属性，我们的 TextInput 组件成为了“受控组件”。这意味着 React 的 state 是输入框值的唯一数据源。
• 用户体验: 提供清晰的占位符（placeholder），使用合适的 keyboardType，并考虑对表单中的第一个输入框使用 autoFocus。
• 验证: 实现输入验证以指导用户并防止错误。这可以在 onChangeText 处理函数中完成，或在提交时进行。

有关 TextInput 属性的更多详情，请参阅官方 React Native 文档：https://reactnative.dev/docs/textinput