ReactNative入门----基于LeanCloud实现ReactNative注册功能

LeanCloud:

国内领先的 BaaS 提供商,为移动开发提供强有力的后端支持。

我们用LeanCloud的数据存储功能,进行用户数据的存储。

准备:

leancloud 注册一个账号,并且创建一个应用。获取APP_ID和 APP_KEY,在 LeanCloud 的控制台/设置/应用 Key里可以找到APP_ID和 APP_KEY。

安装:

首先生成一个ReactNative项目。

$ react-native init AwesomeProject

然后进入项目根目录,安装 LeanCloud SDK。

$ npm install leancloud-storage --save

最后在 JavaScript 入口文件(一般是index.(ios|android).js)中引入 SDK 并初始化:

import AV from 'leancloud-storage';

AV.initialize(APP_ID, APP_KEY);

把 APP_ID  和 APP_KEY 替换成实际的应用数据。运行或刷新应用,如果没有报错的话,说明 LeanCloud SDK 已经正确地加载并执行了。

开始

首先用ReactNative写一个注册界面。

constructor中创建两个状态。

分别是用户名和密码。

constructor方法


输入用户名和密码用的是TextInput组件。

输入密码TextInput

在onChangeText调用时,将的TextInput中的值赋给UserPassword。UserName同理。


注册提交按钮使用TouchableHighlight组件。

TouchableHighlight注册按钮

首先新建一个AVUser的对象实例。然后将用户名及密码赋值给实例。最后调用signUp方法就成功注册了一个新用户。


注册界面

注册一个Jianshu的uesr,在LeanClond中查看。


注册
查看数据

细节补充完善:

当用户名为空时,或者用户密码为空时,对用户进行提示。

进行空值判断
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,292评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,935评论 25 709
  • 22年12月更新:个人网站关停,如果仍旧对旧教程有兴趣参考 Github 的markdown内容[https://...
    tangyefei阅读 35,290评论 22 257
  • REST API 可以让你用任何支持发送 HTTP 请求的设备来与 Parse 进行交互,你可以使用 REST A...
    Caroline嗯哼阅读 6,248评论 0 0
  • 你喜欢我太少 我想你太多
    呆鱼啊阅读 955评论 0 0