🧾 登录注册页面实现解析（React Native 项目）

📌 页面功能目标

• 登录页面：允许用户通过手机号和密码登录，登录成功后跳转至主界面。

• 注册页面：新用户通过填写姓名、手机号、密码进行注册，注册成功后返回登录页。

---

🔐 登录页面 LoginScreen 实现

🌟 1. UI 设计与输入处理

<TextInput
  placeholder="请输入手机号"
  keyboardType="phone-pad"
  value={phone}
  onChangeText={setPhone}
/>

<TextInput
  placeholder="请输入密码"
  secureTextEntry
  value={password}
  onChangeText={setPassword}
/>

• 使用 useState 管理手机号与密码状态。

• 提交时进行空值校验，提示 Alert.alert('提示', '请填写手机号和密码')。

🚀 2. 登录处理逻辑

const { token, userId, message } = await login(phone, password);
Alert.alert('登录成功', message || `欢迎回来，用户ID: ${userId}`);

• 通过调用 services/authService.ts 中真实接口 login() 与后端交互。

• 登录成功后返回用户 token 和 userId。

• 登录成功后使用 navigation.reset() 清空导航栈并跳转 MainApp 页面。

navigation.reset({
  index: 0,
  routes: [{ name: 'MainApp' }],
});

---

🆕 注册页面 RegisterScreen 实现

📋 1. 表单 UI 设计

<TextInput placeholder="姓名" value={name} onChangeText={setName} />
<TextInput placeholder="手机号" keyboardType="phone-pad" value={phone} onChangeText={setPhone} />
<TextInput placeholder="密码" secureTextEntry value={password} onChangeText={setPassword} />

• 姓名、手机号、密码三个输入框使用状态绑定，完整性校验后允许提交。

🔄 2. 注册逻辑实现

const user = await register(phone, password, name);
Alert.alert('注册成功', '请使用手机号和密码登录');
navigation.navigate('Login');

• 调用 authService.ts 中封装的 register() 方法，使用真实的 HTTP POST 请求提交用户信息至 /user/register。

• 注册成功后提示信息，并返回登录页。

---

🔗 后端接口调用逻辑（authService）

✅ login 方法

export const login = async (phone: string, password: string) => {
  const response = await fetch('http://localhost:8080/user/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ phone, password }),
  });

  if (!response.ok) {
    const errorData = await response.json();
    throw new Error(errorData.message || '登录失败');
  }

  const data = await response.json();
  const token = response.headers.get('Authorization');
  const userId = response.headers.get('X-User-ID');

  return {
    message: data.message,
    token: token ? token.split(' ')[1] : '',
    userId: userId || ''
  };
};

• 成功登录后，后端返回 Authorization（如 Bearer Token）与 X-User-ID，供前端使用。

• 错误时读取后端返回的 message 并抛出。

✅ register 方法

export const register = async (phone: string, password: string, name: string) => {
  const response = await fetch('http://localhost:8080/user/register', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ phone, password, name }),
  });

  if (!response.ok) {
    const errorData = await response.json();
    throw new Error(errorData.message || '注册失败');
  }

  return await response.json();
};

• 注册逻辑向 /user/register 提交 phone、password 与 name 字段。

• 错误处理与登录一致，提升用户体验。

---

🎯 页面跳转与导航设置

• 登录和注册使用 useNavigation 结合 @react-navigation/native-stack 实现页面跳转。

• 登录成功后 navigation.reset() 替代简单 navigate，确保用户不能回退至登录页。

• 注册成功使用 navigation.navigate('Login') 返回登录页。