rn-lottie动画配合leanCloud制作用户登录注册页面

视频不到为啥闪了一下,用户账号注册用的是leanCloudhttps://www.leancloud.cn/存储,动画用的是lottie

leanClodu使用
注册账号,创建项目,react-native安装依赖
yarn add leancloud-storage @leancloud/platform-adapters-react-native @react-native-community/async-storage-backend-legacy@^2.0.0-rc.3
初始化

import AV from 'leancloud-storage/core';
import * as adapters from '@leancloud/platform-adapters-react-native';
AV.setAdapters(adapters);

使用用户功能

//注册
user.setUsername(this.state.userName);
    user.setPassword(this.state.passWord.toString());
    user.signUp().then((user) => {
      // 注册成功
      console.log(`注册成功。objectId:${user.id}`);
    }, (error) => {
      console.log(`注册false`);
    });

登录检测

AV.User.logIn(this.state.userName,this.state.passWord).then((user) => {
      // 登录成功
      console.log('登录成功')
    }, (error) => {
      // 登录失败(可能是密码错误)
      alert('登录失败')
    });

rn-lottie动画配合leanCloud制作用户登录注册页面_第1张图片

可以说是不能再简单了
lottie也很简单,注册账号,然后选择动画,下载动画的json文件,安装lottie依赖使用

import LottieView from 'lottie-react-native'

<LottieView
	 source={require('../../assets/successful-submitted-launched-go.json')}
 	 ref={animated => {
	 this.animated = animated // 用this.animated.play()控制动画播放
	  }}
  autoPlay={false} loop={false} />
// auto是自动播放 loop是循环播放

你可能感兴趣的:(react-native)