如何使用react-native管理UX身份验证错误？

import React, { useState } from 'react';
import { View, TextInput, Button, Alert } from 'react-native';

const AuthScreen = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleLogin = () => {
    // 发送验证请求到后端服务器
    // 假设返回的结果为{ success: false, message: '身份验证失败' }
    const response = { success: false, message: '身份验证失败' };

    if (response.success) {
      // 验证成功，执行登录操作
    } else {
      // 验证失败，显示错误消息
      setError(response.message);
    }
  };

  return (
    <View>
      <TextInput
        placeholder="用户名"
        value={username}
        onChangeText={text => setUsername(text)}
      />
      <TextInput
        placeholder="密码"
        secureTextEntry
        value={password}
        onChangeText={text => setPassword(text)}
      />
      <Button title="登录" onPress={handleLogin} />
      {error ? <Alert>{error}</Alert> : null}
    </View>
  );
};

export default AuthScreen;