16-8 功能完善

今朝有熊
41 阅读4分钟

课程目标

本节课程的目标是：

  1. 总结本章内容，巩固学到的知识。
  2. 完善登录失败提示、按钮防重复点击、网络错误处理等功能。
  3. 学习性能优化工具 react-native-screens 的使用。
  4. 布置课后练习，帮助学员更好地理解和应用所学内容。

1. 本章内容回顾

1.1 学习内容

  • 学习了 Formik 和 Yup 的用法，简化表单校验逻辑。
  • 通过封装组件（如 Input 和 Authorized），减少重复代码，提高代码复用性。
  • 使用 dva 管理状态，实现登录状态的持久化。

1.2 封装的注意事项

封装组件虽然可以减少代码重复，但要注意：

  • 避免过度封装：过度封装可能会导致组件扩展性变差。
  • 保持灵活性：封装时尽量考虑组件的通用性和适配性。

2. 功能完善

2.1 登录失败提示

问题

目前登录失败时没有任何提示，用户体验较差。

解决方案

  1. 安装 react-native-root-toast：

    yarn add react-native-root-toast

  2. 在 src/index.tsx 中添加 RootSiblingParent，解决 Android 端无法显示的问题：

    import {RootSiblingParent} from 'react-native-root-siblings';

<RootSiblingParent>
    <Navigator />
</RootSiblingParent>

  3. 在登录失败时，调用 Toast 组件显示提示信息：

    import Toast from 'react-native-root-toast';

Toast.show('登录失败，请检查账号或密码！', {
    duration: Toast.durations.LONG,
    position: Toast.positions.CENTER,
    shadow: true,
    animation: true,
});

  4. 效果：在模拟器中查看登录失败时的提示效果。

2.2 防止按钮重复点击

问题

在表单提交或其他操作中，用户可能快速多次点击按钮，导致重复提交或逻辑异常。

解决方案

  1. 使用 lodash 的 throttle 函数对按钮的 onPress 事件进行节流：

    import _ from 'lodash';

let throttlePress = undefined;
if (typeof onPress === 'function') {
    throttlePress = _.throttle(onPress, 1000, {leading: true, trailing: false});
}

  2. 使用 useCallback 缓存节流函数，避免每次渲染时重新计算：

    import {useCallback} from 'react';

let throttlePress = undefined;
if (typeof onPress === 'function') {
    throttlePress = useCallback(
        _.throttle(onPress, 1000, {leading: true, trailing: false}),
        [onPress]
    );
}

  3. 在 Login 页面中，将 loading 状态与按钮的 disabled 属性绑定，防止重复提交：

    <Touchable disabled={loading} onPress={throttlePress}>
    <Text>登录</Text>
</Touchable>

  4. 效果：在模拟器中测试按钮的防重复点击功能。

2.3 网络错误处理

问题

当应用无法连接服务器时，未对错误进行友好提示，用户体验较差。

解决方案

  1. 在 dva 的 create 方法中，添加 onError 钩子函数：

    const app = create({
    onError: function (e) {
        Toast.show('网络错误！', {
            duration: Toast.durations.LONG,
            position: Toast.positions.CENTER,
            shadow: true,
            animation: true,
        });
    },
});

  2. 效果：断开网络后，模拟网络请求失败，查看提示效果。

2.4 性能优化：使用 react-native-screens

问题

当前应用未使用 react-native-screens，未充分利用原生组件优化性能和内存占用。

解决方案

  1. 安装并启用 react-native-screens：

    import {enableScreens} from 'react-native-screens';

enableScreens();

  2. 在 src/index.tsx 中添加上述代码。

  3. 效果：在模拟器中运行，观察性能变化（尤其是在页面切换时的流畅度）。

3. 课后练习

3.1 注册与用户信息收集

目标

实现一个注册页面，收集用户信息并保存到服务器。

要求

  1. 使用 Formik 和 Yup 实现表单校验。

  2. 表单字段包括：

    • 用户名
    • 密码
    • 邮箱
    • 手机号

  3. 注册成功后，显示成功提示并跳转到登录页面。

提示

  • 可参考登录页面的实现方式。
  • 使用 Toast 显示注册成功或失败的提示。

3.2 持久化更多用户数据

目标

在登录后，将更多用户数据（如偏好设置、历史记录等）保存到 storage 中，并在应用启动时加载。

要求

  1. 修改 dva 中的 login 模块，添加保存和加载用户数据的逻辑。
  2. 在“我的页面”中显示用户的偏好设置或历史记录。

3.3 优化节流逻辑

目标

封装一个通用的 ThrottleButton 组件，统一处理按钮的节流逻辑。

要求

  1. 接收 onPress、disabled 等属性。
  2. 内部使用 lodash 的 throttle 函数实现节流。
  3. 在项目中替换所有需要节流的按钮。

4. 小结

4.1 本节内容总结

  1. 添加了登录失败提示，提升用户体验。
  2. 通过按钮节流和 loading 状态，防止重复提交。
  3. 实现了网络错误的全局处理。
  4. 使用 react-native-screens 优化了页面切换性能。

4.2 思想总结

  • 用户体验：通过提示信息和错误处理，提升应用的易用性。
  • 性能优化：引入原生优化工具（如 react-native-screens），提高应用性能。
  • 代码复用：封装通用组件（如 ThrottleButton），减少重复逻辑。

5. 下一章预告

我们的课程到这里，听书应用的大部分功能已经完成。在下一章中，我们将学习如何将应用打包发布到应用商城中，让更多用户可以使用我们的应用！

avatar
文章
阅读
粉丝