登录/注册页

ggbond_zhu
130 阅读3分钟

1.AsyncStorage存储用户信息

AsyncStorage是 React Native 提供的一个本地键值对存储方案，类似于浏览器的 localStorage。它可以将数据以字符串形式持久化在设备本地。

安装：npm install @react-native-async-storage/async-storage

在你的 userStorage.ts 里，用户信息存储的实现方式如下：

  1. 注册时

    • 先通过 getAllUsers() 读取所有已注册用户（从 users 这个 key 里取出 JSON 字符串并解析为数组）。
    • 检查新用户的邮箱或手机号是否已存在。
    • 如果没有重复，把新用户对象 push 到数组，再用 AsyncStorage.setItem('users', JSON.stringify(users)) 存回本地。

  2. 登录时

    • 通过 getAllUsers() 读取所有用户。
    • 查找账号（邮箱或手机号）和密码都匹配的用户，找到则登录成功。

  3. 数据结构

    • 所有用户信息都存储在 users 这个 key 下，是一个用户对象数组，内容被序列化为 JSON 字符串。

总结：

AsyncStorage 通过 setItem 和 getItem 方法，把所有用户信息以字符串形式存储在本地，实现了简单的用户注册和登录功能。

2.React Navigation实现路由导航

一个项目肯定不只一个页面，比如用户首次打开App需要进行登录，登录成功会跳转到首页，如果没有账号需要点击去注册跳转到注册页面，注册成功后返回登录页

项目使用的是 React Navigation 实现路由导航。

安装React Navigation及其依赖，实现页面跳转

npm install @react-navigation/native @react-navigation/stack react-native-screens react-native-safe-area-context

具体实现方式如下：

  1. @react-navigation/native 和 @react-navigation/stack（或类似的 Stack Navigator），这是 React Native 最常用的导航库。
  2. 导航容器与导航栈在项目的入口（通常是 App.tsx），会有如下结构：
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Register" component={RegisterScreen} />
        <Stack.Screen name="Home" component={HomeScreen} />
        {/* 其他页面 */}
      </Stack.Navigator>
    </NavigationContainer>
  );
}
  1. 页面跳转在页面组件中，通过 useNavigation hook 获取 navigation 对象，然后调用 navigation.navigate('目标页面') 实现页面跳转。例如：
const navigation = useNavigation();
navigation.navigate('Home');
  1. 参数传递页面跳转时可以通过 navigation.navigate('Page', { param1: value }) 传递参数，目标页面通过 route.params 获取。

3.页面自适应

Dimensions 和 Platform 的作用如下：

  • Dimensions用于获取当前设备屏幕的宽度和高度（如 const { width, height } = Dimensions.get('window');），从而可以根据屏幕大小自适应布局，比如判断是否为平板（isTablet = width >= 600），以及设置样式中的宽高、字体大小等。
  • Platform用于判断当前运行环境是 iOS、Android 还是 Web（如 Platform.OS === 'ios'），从而可以针对不同平台做样式或行为上的差异处理。例如在样式中设置不同的 paddingVertical，以适配 iOS 和 Android 的输入框高度。

这两个模块都是为了实现跨平台自适应的界面和体验，让你的应用在不同设备和系统上都能有合适的显示效果。

4.踩坑记录

1.App图标在web端显示，Android没有显示

原因：React Native 的 Image 组件不支持直接加载 SVG 文件（如 logo.svg），在 web 端可以显示是因为 web 支持 SVG，但在 Android/iOS 原生端会直接报错或不显示。

解决方法：

  • 用 PNG/JPG 等位图格式替换 logo.svg，比如用 logo.png。
  • 如果必须用 SVG，需用第三方库（如 react-native-svg 和 react-native-svg-transformer），但用法和 Image 不同。

修复方式：弄了一张png格式的图片

<Image source={require('./assets/logo.png')} style={styles.logo} resizeMode="contain" />

项目地址如下，欢迎关注： github.com/ggbond11/pi…

avatar
文章
阅读
粉丝