/ react native

React Native跨平台移动应用开发实战 - 注册登录

本文隶属于文章系列 React Native跨平台移动应用开发实战 ,讲解用户注册和登录。由于篇幅所限,后面关于功能的讲解中我们重点关注component部分的代码,container、action和reducer代码请查阅Github上的公开库 zqc-app-demo

  1. 注册登录选择页
  2. 注册
  3. 登录

注册登录选择页

启动时如果检测到没有登录,则进入此页让用户选择注册新帐号还是使用现有帐号登录。退出登录后也应进入此页。

注册

为了避免让用户反感注册过程中填写资料,应尽量减少必填信息,并且分步骤让用户填写,而不是在一个页面中填写完所有,从视觉上让用户觉得轻松一些。对于移动应用来说,最好使用手机号注册,方便日后联系用户。如果使用手机号注册,需要验证手机号的真实性。
有关表单数据校验、网络请求和缓存方面的技术资料可阅读前一篇文章 React Native跨平台移动应用开发实战 - 数据同步

第一步,填写手机号和密码
表单数据将实时校验,填写错误时将在导航下方给予用户提示。

第二步,验证手机号
为了防止用户频繁请求发送验证码,需要增加最短时间间隔限制,服务端也需要作限制。

第三步,完善资料
完善资料页只有昵称必须需要手动填写,头像和性别已自动填写,用户如果觉得不合适可自行修改。

登录

登录页比较简单,提交用户输入的手机号和密码到服务端登录API,验证通过则跳转到应用首页Nearby。

React Native跨平台移动应用开发实战 - 注册登录
Share this