React Native边学边做(二)登录页面

1. 入口页面

首先新增一个登录页面，新建一个view文件夹，view目录下增加login.js

在login.js中增加如下代码

行1～2:引入react和用到的组件库

import是es6语法，加载其它文件中的模块。行7中的class标示成export，所以也可以在其它js文件中import使用。

行3～9:定义了一个组件Login,这个组件后面会扩展成登录页面，这里先简单放一个标题。

class也是javascript在es6中引入的，引入后类定义的风格和java或c#更加接近了。

行10～17:定义了一组样式，行6中给标题引用了headtitle的样式。

行3引入上面login.js中定义的类

行2是引入行4用到到AppRegistry

行4使用AppRegistry.registerComponent注册入口类，同一个app中只会注册一次，引号中的‘MyFirstApp’是react-nativeinit xxx的项目名称。

刷新一下虚拟机，边学边做的标题已经出现了。

2登录界面

接下来一步一步完善登录界面

Login.js目前只有一个标题，先将标题增加一个背景色

行12～14把<Text>组件放中<View>中，styles.header设定了高度60，背景色mediumpurple。行5引用View组件。

3.添加密码账号输入框，以及登录按钮

login.js代码:

行15～17，行18～32，行33～38分别画了3块内容，标题一块，账号和密码一块，提交一块。

刷新虚拟机

4.TouchableHighlight是用于响应触摸操作的控件，下面就给它加按下去的事件。点击“登录”按钮时，获取账号输入框和密码输入框的值，若密码有效，跳转到首页(home.js)

login.js的代码修改如下：

验证密码，需要获取账号和密码输入框中的内容，在reactnative中，可以把这两个值保存在state中，输入框内容变化时，修改state中的值，需要取值时，可直接获取state的值

行11～20: 在构造函数constructor中先对state初始化

行45,行54: 输入框中内容变化时，更新state的值

行59: 按钮上绑定一个触摸事件，按按钮按下时执行_onPressLogin事件

这里先简单的模拟一个验证，根据验证是否通过，作出不同的提示，后面再实现密码验证功能和跳转页面