React Native 开发系列3 登陆注册

react-native | Comments

差不多要开始实现第一个页面了,app中用户需要选择课程背单词,还需要同步学习的数据,这时候就需要能够记住用户的信息,判断用户是否登录,以及当前是哪一个用户。在web开发中就是需要实现用户系统,登录、注册、忘记密码等等。因为我已经有一个写好的backend,只需要在app中能够接入cookies就可以实现登录。

目录

  1. 项目搭建 – 底部导航栏及搜索
  2. 实现搜索 – 调用API及自定义组件
  3. 登录注册 – 使用cookies

使用cookie实现登录方法是参照Github上的这个例子来实现react-native-login

另外为了方便登录后的跳转,用了react-native-router-flux来做Router, 需要先对之前的代码做一些改写。

首先需要安装需要的库

1
2
3
npm i react-native-router-flux --save
npm install react-native-cookies
rnpm link react-native-cookies - (run npm install -g rnpm if required)

1. 添加AuthLogin组件

使用webview打开用户登录的页面,在用户登录后跳转到App中。

1
2
3
4
5
6
7
8
9
10
11
12
<View style={[styles.container]}>
  <WebView
    ref={'webview'}
    automaticallyAdjustContentInsets={false}
    style={styles.webView}
    source=
    javaScriptEnabled={true}
    onNavigationStateChange={this.onNavigationStateChange.bind(this)}
    startInLoadingState={true}
    scalesPageToFit={true}
  />
</View>

2. 实现Router

在app目录中添加Router.js, 把原来写在index.ios.js中的代码移到Router.js中, 用react-native-router-flux中提供的Scene来管理页面。

关键的部分在于componentWillMount方法中,先检测cookie,根据cookie值设置loggedIn变量,在组件中使用这个变量控制初始的页面应该是登录,还是进入App。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
componentWillMount () {
  CookieManager.get(HOME_URL, (err, cookie) => {
    let isAuthenticated;
    // If it differs, change `cookie.remember_me` to whatever the name for your persistent cookie is!!!
    if (cookie && cookie.hasOwnProperty('sessionid')) {
      isAuthenticated = true;
    }
    else {
      isAuthenticated = false;
    }

    this.setState({
      loggedIn: isAuthenticated,
      loadedCookie: true
    });
  });
}

render(){
  return (
    <Router>
      <Scene key="login" component={AuthLogin} title="登录" initial={!this.state.loggedIn}/>
      <Scene key="main" component={App} hideNavBar={true} initial={this.state.loggedIn}/>
    </Router>
  )
}

3. 重写index.ios.js

在index.ios.js中只需要加载Router即可,后面所有的页面都交由Router进行管理。

1
2
import Router from './app/Router'
AppRegistry.registerComponent('AwesomeProject', () => Router);

完成后的效果:

完整的代码见GitHub day3

Comments