基于 MaxLeap SDK 的登录 UI 组件。
maxlogin-react-native
是一个登录界面组件,它实现了用户名密码登录界面、注册、手机号登录三个界面。
组件使用 react-native-redux
框架实现。
-
**重要:**先安装
maxleap-react-native
, 参照 MaxLeap RN 开发文档 -
安装
maxlogin-react-native
npm install --save maxlogin-react-native
-
打开 Finder,找到本项目的根目录,使用 Xcode 打开 iOS 工程(双击 .xcodeproj 文件即可),然后导航到
/node_modules/maxlogin-react-native/ios/lib
目录,把该目录下的 frameworks 都拖到 Xcode 工程中
导入本模块:
import * as MaxLogin from 'maxlogin-react-native';
**重要:**首先需要熟悉 redux
框架,https://github.com/reactjs/redux , 还有 react-redux
一个 immutable
的 Record
对象,使用时需要把它的一个实例放到整个应用程序的 initialState 的顶层,并且字段名必须是 maxlogin
:
const initState = {
maxlogin: new MaxLogin.InitialState()
};
InitialState
包含一个 currentUser
字段,用来存放当前登录的用户
此模块中的 reducers, 需要合并到 RootReducer 中:
import { combineReducers } from 'redux';
const rootReducers = combineReducers({
...MaxLogin.reducers,
...otherReducers
});
一个 Action , 用来设置当前登录用户,可以传入 null
**注意:**这是一个 Action, 直接调用不能达到期望的效果, 使用方法如下:
// 创建 store 对象
const store = createStore(rootReducers, initState, applyMiddleware(thunk));
store.dispatch(MaxLogin.setCurrentUser(user))
注册组件,调用 MaxLeap.User.signUp
方法,使用用户名密码注册,可以嵌入其他 View 中使用。
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
onSuccess | function |
注册成功的回调 参数: user 注册成功的用户对象 |
|
onFailure | function |
注册失败的回调 参数: error 错误对象 |
|
onSubmit | function |
处理表单按钮点击事件,如果不为空,则内置处理器不会再响应,也就是不会再走内置注册流程 |
登录组件, 调用 MaxLeap.User.logIn
接口,使用用户名密码登录,可以嵌入其他 View 中使用。
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
onSuccess | function |
登录成功的回调 参数: user 登录成功的用户对象 |
|
onFailure | function |
登录失败的回调 参数: error 错误对象 |
|
onSubmit | function |
处理表单按钮点击事件,如果不为空,则内置处理器不会再响应,也就是不会再走内置登录流程 |
手机号登录组件,可以嵌入其他 View 中使用。使用该组件登录不需要注册,仅点击获取验证码,填写验证码就可以登录。
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
onSuccess | function |
登录成功的回调 参数: user 登录成功的用户对象 |
|
onFailure | function |
登录失败的回调 参数: error 请求错误 |
|
onSubmit | function |
处理表单按钮点击事件,如果不为空,则内置处理器不会再响应,也就是不会再走内置登录流程 | |
waitSeconds | number |
60 | 获取验证码按钮的冷却时间,冷却期间,按钮不可点击, 单位:秒 |
onSmsRequestSuccess | function |
验证码请求成功的回调 | |
onSmsRequestFailure | function |
验证码请求失败的回调 参数: error 请求错误 |
**重要:**首先需要熟悉 redux
框架,https://github.com/reactjs/redux , 还有 react-redux
在应用最上层的 index.js 中,
import React, { Component } from 'react';
import ReactNative { AppRegistry, View } from 'react-native';
import { Provider } from 'react-redux';
import { combineReducers, createStore, applyMiddleware } from 'redux';
// thunk 必须集成
import thunk from 'redux-thunk';
import MaxLeap from 'maxleap-react-native';
import * as MaxLogin from 'maxlogin-react-native';
export default function main(platform) {
// 集成 MaxLogin 中的 reducers
const rootReducers = combineReducers(MaxLogin.reducers);
// 集成 MaxLogin 的 InitialState, 注意,这里的字段名必须为 maxlogin
const initState = {
maxlogin: new MaxLogin.InitialState()
};
// 创建 store 对象
const store = createStore(rootReducers, initState, applyMiddleware(thunk));
class example extends Component {
render() {
return (
<Provider store={store}>
<View />
</Provider>
);
}
}
function isAnonymous(user) {
let authData = user.get('authData')
let anonymous = authData && authData['anonymous']
let aid = anonymous && anonymous['id']
return aid !== undefined
}
// 获取本地缓存的用户
MaxLeap.User.currentAsync().then(user => {
if (user && !isAnonymous(user)) {
// 下面这行代码会触发修改 state.maxlogin.currentUser 的操作
store.dispatch(MaxLogin.setCurrentUser(user))
}
}).catch(err => {
console.log(err);
})
AppRegistry.registerComponent('example', () => example);
}
接下来就可以使用登录界面了:
import React, { Component } from 'react';
import ReactNative, { ScrollView } from 'react-native';
import * as MaxLogin from 'maxlogin-react-native';
export default class Login extends Component {
render() {
return (
<ScrollView style={{flex: 1}}>
<MaxLogin.Login
style={{flex: 0}}
onSuccess={user => {
// 用户登录成功
console.log(user);
}}
onFailure={err => {
// 用户登录失败
alert(err)
}}/>
</ScrollView>
);
}
}