Hey there! Making the switch from Angular to React Native is totally doable—form handling just uses React's state management under the hood instead of Angular's two-way binding. Let's walk through how to capture your password inputs, validate them, and follow best practices for this scenario.

1. Set Up State for Inputs & Errors #

First, we'll use React's useState hook to track the values of your password fields, plus any error messages we need to display. This replaces Angular's [(ngModel)] approach.

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Form, Item, Input, Label, Button } from 'native-base'; // Assuming you're using NativeBase since your code uses Form/Item/Label

export default function PasswordUpdateScreen() {
  // Track input values
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  
  // Track validation errors
  const [passwordError, setPasswordError] = useState('');
  const [confirmError, setConfirmError] = useState('');

  // ... rest of the code will go here
}

2. Bind Inputs to State #

Next, connect each <Input> to its state using the onChangeText prop. This updates the state every time the user types something:

<Form>
  <Text>Password</Text>
  <Label>New Password</Label>
  <Item regular error={!!passwordError}>
    <Input
      secureTextEntry // Hides password characters
      value={newPassword}
      onChangeText={(text) => {
        setNewPassword(text);
        // Optional: Clear error as user types
        if (passwordError) setPasswordError('');
      }}
    />
  </Item>
  {/* Display password error if exists */}
  {passwordError ? <Text style={styles.errorText}>{passwordError}</Text> : null}

  <Label style={styles.label}>Confirm</Label>
  <Item regular error={!!confirmError}>
    <Input
      secureTextEntry
      value={confirmPassword}
      onChangeText={(text) => {
        setConfirmPassword(text);
        // Optional: Clear error as user types
        if (confirmError) setConfirmError('');
      }}
    />
  </Item>
  {/* Display confirm password error if exists */}
  {confirmError ? <Text style={styles.errorText}>{confirmError}</Text> : null}
</Form>

3. Write Validation Logic #

Now create a function to handle validation. We'll check two things:

• The passwords match
• The new password meets your regex requirements (example: min 8 chars, 1 uppercase, 1 number, 1 special character)

const validatePasswords = () => {
  let isValid = true;
  // Regex for password requirements (adjust this to your needs!)
  const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

  // Check new password against regex
  if (!passwordRegex.test(newPassword)) {
    setPasswordError('Password must be at least 8 characters, include uppercase, number, and special character');
    isValid = false;
  }

  // Check if passwords match
  if (newPassword !== confirmPassword) {
    setConfirmError('Passwords do not match');
    isValid = false;
  }

  return isValid;
};

4. Handle Button Press #

Wire up the onPress handler to run the validation, and only proceed if everything checks out:

<Button 
  title="Update" 
  onPress={() => {
    // Reset errors first
    setPasswordError('');
    setConfirmError('');

    const isFormValid = validatePasswords();
    if (isFormValid) {
      // Do your update logic here (e.g., call an API)
      console.log('Passwords are valid! Proceeding with update...');
      // Reset form if needed
      setNewPassword('');
      setConfirmPassword('');
    }
  }} 
/>

Best Practices for React Native Forms #

• Real-time validation: Instead of only validating on button press, you can run validation as the user types (e.g., call a simplified validation in onChangeText). This gives immediate feedback.
• Use form libraries for complex forms: If you have more complex forms (multiple fields, nested inputs), libraries like Formik or React Hook Form can simplify validation and state management. They handle things like touched states and form submission more elegantly than manual state.
• Secure password handling: Always use secureTextEntry for password fields to hide input. Never log or store plaintext passwords—send them encrypted to your backend.
• Clear error messaging: Make sure errors are specific and easy to understand (avoid generic messages like "Invalid password").
• Reusable validation functions: Extract your regex and validation logic into a separate utility file if you need to use them across multiple screens.

Here's the full styles object to go with the code:

const styles = StyleSheet.create({
  label: {
    marginTop: 15,
  },
  errorText: {
    color: '#dc2626',
    fontSize: 12,
    marginLeft: 10,
    marginTop: 5,
  },
});

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