React-Native实现登录界面

最近,在用React Native开发,以下是一个登录界面,在登录界面用到的知识点现总结如下:

1.在登录成功之后,我将服务器返回的数据存储在react-native-storage中,token和用户名、密码分别保存在不同的key中
2.网络请求使用的fetch并进行了封装
3.在输入帐号和密码时,键盘弹出会遮住输入框,这里我在View外放了一个ScrollView来处理(如果有好的方法可以告诉我一下...)

效果图:

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  TouchableOpacity,
  PixelRatio,
  ScrollView,
  View,
  TextInput,
  Alert
} from 'react-native';

import { fetchRequest, AUTH_ERR_MSG, ERR_MSG } from '../../lib/network/request';
import config from '../../config';
import Home from './Home';
import storage from '../../storage/storage';
import { initialSocket } from '../consultant/gifted-chat/ConsultSocket';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#03a9f4'
  },
  flex: {
    flex: 2
  },
  buttonView: {
    flex: 3
  },
  title: {
    textAlign: 'center',
    color: 'white',
    fontSize: 25,
    marginTop: 80,
    fontWeight: 'bold'
  },
  inputView: {
    padding: 5,
    backgroundColor: '#fff'
  },
  lineBottom: {
    borderBottomWidth: 5 / PixelRatio.get(),
    borderColor: 'rgb(208,208,208)'
  },
  button: {
    marginTop: 30,
    marginLeft: 10,
    marginRight: 10,
    height: 44,
    borderRadius: 2,
    backgroundColor: 'rgb(255, 64, 129)',
    justifyContent: 'center',
    overflow: 'hidden'
  },
  buttonText: {
    fontSize: 22,
    textAlign: 'center',
    color: 'white',
    fontWeight: 'bold'
  },
  text: {
    flex: 1,
    lineHeight: 44,
    fontSize: 18,
    justifyContent: 'center',
    textAlign: 'center',
    fontWeight: 'bold'
  },
  view: {
    flexDirection: 'row',
    height: 44
  },
  textInputStyle: {
    flex: 5,
    marginRight: 10,
    fontSize: 18,
    marginTop: 4
  },
  lineTopBottom: {
    borderBottomWidth: 3 / PixelRatio.get(),
    borderColor: 'rgb(208,208,208)'
  },
  centering: {
    alignItems: 'center',
    justifyContent: 'center'
  }
});

export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
      token: ''
    };
  }

  //
  componentWillMount() {
    storage.load({
      key: 'account'
    }).then((ret) => {
      if (ret !== null) {
        this.setState({
          username: ret.username ? ret.username : '',
          password: ret.password ? ret.password : ''
        });
      }
    }).catch((err) => {
      console.log(err);
    });
  }

  // 跳转到第二个页面去
  onLoginSuccess = () => {
    // socket 初始化
    initialSocket(this.state.token);
    const { navigator } = this.props;
    if (navigator) {
      navigator.replace({
        name: 'Home',
        component: Home
      });
    }
  }

  clickLoginBtn() {
    // 判断密码是否为空
    if (this.state.username === '' || this.state.password === '') {
      Alert.alert('账号或密码不能为空');
      return;
    }
    fetchRequest(`${config.apiPrefix}/auth/consultant`, {
      method: 'POST',
      body: JSON.stringify({
        username: this.state.username,
        password: this.state.password
      })
    }, false).then((json) => {
      if (json.retCode === 0) {
        // 保存token
        this.setState({
          token: json.data.token
        });
        storage.save({
          key: 'identity',
          rawData: {
            token: json.data.token,
            headImg: json.data.userProfile.headImg,
            userType: json.data.userProfile.userType,
            name: json.data.userProfile.name
          },
          expires: json.data.ttl
        }).then(() => {
          // 保存account信息
          storage.save({
            key: 'account',
            rawData: {
              username: this.state.username,
              password: this.state.password,
              isAutoLogin: true
            }
          });
        }).then(() => {
          // 登录成功
          this.onLoginSuccess();
        })
        .catch((err) => {
          console.log(err);
          throw new Error();
        });
      } else if (json.retCode === -2) {
        // 用户名或密码错误
        global.alert('账号或密码不能为空');
      } else if (json.retCode === 5001) {
        Alert.alert('账号或密码错误');
      } else {
        throw new Error();
      }
    }).catch((err) => {
      if (err.message !== AUTH_ERR_MSG) {
        // 出错的处理逻辑
        Alert.alert(ERR_MSG);
        console.error(err);
      } else {
        console.log(err);
      }
    });
  }

  render() {
    return (
      <ScrollView
        contentContainerStyle={{ flex: 1 }} // 非常重要,让ScrollView的子元素占满整个区域
        keyboardDismissMode="on-drag" // 拖动界面输入法退出
        keyboardShouldPersistTaps={false} // 点击输入法以外的区域,输入法退出 不加这两句也可以实现点击空白处收回键盘
        scrollEnabled={false} // 当值为false的时候,内容不能滚动,默认值为true
      >
        <View
          style={styles.container}
        >
          <View style={styles.flex}>
            <Text style={styles.title}>健康生活</Text>
          </View>
          <View style={styles.inputView}>
            <View style={[styles.view, styles.lineTopBottom]}>
              <Text style={styles.text}>账号:</Text>
              <TextInput
                style={styles.textInputStyle}
                placeholder="请输入账号"
                clearButtonMode="while-editing"
                secureTextEntry={false}
                onChangeText={(text) => {
                  this.setState({
                    username: text
                  });
                }}
                value={this.state.username}
              />
            </View>
            <View style={[styles.view, styles.lineTopBottom]}>
              <Text style={styles.text}>密码:</Text>
              <TextInput
                style={styles.textInputStyle}
                placeholder="请输入密码"
                clearButtonMode="while-editing"
                secureTextEntry
                onChangeText={(text) => {
                  this.setState({
                    password: text
                  });
                }}
                value={this.state.password}
              />
            </View>
          </View>
          <View style={styles.buttonView}>
            <TouchableOpacity
              style={styles.button}
              onPress={() => this.clickLoginBtn()}
            >
              <Text style={styles.buttonText}>登 录</Text>
            </TouchableOpacity>
          </View>

        </View>
      </ScrollView>
    );
  }
}

Login.propTypes = {
  navigator: React.PropTypes.shape({})
};
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 143,048评论 1 300
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 61,330评论 1 256
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 94,541评论 0 213
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 41,042评论 0 176
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 48,821评论 1 255
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,795评论 1 176
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,413评论 2 271
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,173评论 0 167
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 28,994评论 6 229
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,525评论 0 213
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,327评论 2 215
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,648评论 1 230
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,248评论 0 31
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,142评论 2 214
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,521评论 3 204
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,622评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,025评论 0 166
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,543评论 2 230
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,636评论 2 231

推荐阅读更多精彩内容