React-Native 二、登录注册模块开发

前段时间公司项目比较赶, 没时间写文章, 这两天闲下来了, 总结了一下, 写了一篇比较综合的UI项目, 登录注册模块, 包含UI 网络请求等功能, 希望对大家理解React Native的界面布局和网络请求有一定的帮助.

项目可到github下载: https://github.com/YTiOSer/YTReact-Native_LoginUI

1.头文件

这个项目中用到了多个UI控件和导航, 所以需要引入多个控件和React Navigation,导航的使用方法上篇文章已经讲述, 这里就不再讲了,代码如下所示:

 

import React, { Component } from 'react';
import { createStackNavigator } from 'react-navigation';
import ButtonView from './ButtonView';
import RegistView from './regist/RegistView';

import {
  Platform,
  StyleSheet,
  Text,
  View, 
  TextInput, 
  Button,
  Alert,
  Fetch,
  Dimensions,
} from 'react-native';

2. 封装控件

项目中针对按钮ButtonView进行了封装, 页面中使用的按钮都可以使用封装的控件, 这样方便管理和使用, 代码在ButtonView.js目录下, 具体封装代码如下:

 

export default class ButtonView extends React.Component {

    static defaultProps = {
        btnName: 'Button',
        underlayColor: 'gray',
    };

    constructor(props) {
        super(props);
    }

  render() {
    return (
        <View style = {styles.container}>
            <TouchableHighlight
                style={[styles.btnDefaultStyle,this.props.btnStyle,styles.center]}
                activeOpacity={0.5}
                underlayColor={this.props.underlayColor}
                onPress&