探秘React Native实战：React Native Login项目解析与应用

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  TouchableOpacity,
  AsyncStorage
} from 'react-native';
 
export default class LoginScreen extends Component {
  // 省略其他代码...
 
  // 登录方法
  login = async () => {
    const { navigation } = this.props;
    const { username, password } = this;
 
    // 验证用户名和密码是否为空
    if (username.trim() === '' || password.trim() === '') {
      alert('用户名和密码不能为空！');
      return;
    }
 
    try {
      const response = await fetch('http://192.168.1.103:3000/api/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          username: username.trim(),
          password: password.trim()
        })
      });
 
      const res = await response.json();
      if (res.status === 'success') {
        // 存储用户信息
        await AsyncStorage.setItem('user', JSON.stringify(res.data));
        // 导航到首页
        navigation.navigate('Home');
      } else {
        alert('登录失败，用户名或密码错误！');
      }
    } catch (error) {
      alert('登录失败，网络错误！');
    }
  };
 
  // 省略其他代码...
}
 
// 样式定义
const styles = StyleSheet.create({
  // ...
});

这段代码展示了如何在React Native应用中实现用户登录功能。其中使用了fetch API来发送POST请求到服务器端，并处理了可能出现的异常。同时，使用了AsyncStorage来存储登录成功后的用户信息。这个例子简洁明了，并且包含了错误处理，非常适合作为初学者学习和理解如何在React Native中实现登录功能的参考。