React Native实现注册和登录

React-Native-Register-Login-Demo

这是最终的效果图

项目Demo可以到github上下载，方便大家理解。

---

下面将一步一步带大家完成这个Demo

搭建环境

环境的搭建只需要安装React Native中文网的步骤搭建环境即可，可以选择不同的桌面系统对不同的手机系统的环境的搭建。
这是使用的是最新的0.51版本，想要切换版本的可以点击左上角的版本来切换所需的版本

程序开发

引入依赖

我们的Demo中使用了navigation，所以就需要引入依赖

首先，编辑package.json文件，在”dependencies”中添加”react-navigation”: “git+https://github.com/react-community/react-navigation.git“，这样就引入了依赖，添加后的”dependencies”如下所示

"dependencies": {
  "react": "16.2.0",
  "react-native": "0.52.0",
  "react-navigation": "git+https://github.com/react-community/react-navigation.git"
},

然后，我们就需要安装依赖了，使用命令行(mac的终端，windows的cmd)先进入项目根目录，然后执行npm install命令，然后运行一次项目，如果出错，就需要先将node_modules文件夹删除，然后重新执行一次npm install命令，这样就准备完成了

集中代码

个人习惯将js代码放到同一个文件夹下面，这样方便管理代码，所以我们需要先自己创建一个scene文件夹，然后将App.js文件夹移到scene文件夹中

如果使用的是WebStorm编辑的项目的话，我们移动App.js文件之后，它会自动修改index.js文件，便不用执行下一步了(以防万一，还是打开index.js查看是否正确)

当我们移动了App.js文件之后，运行项目可能出错，这是因为index.js文件中的程序入口指向的是App.js，而在上一步更改了App.js的路径，所以这里需要将路径更改正确

import { AppRegistry } from 'react-native';
import App from './scene/App';

AppRegistry.registerComponent('Demo', () => App);

这就是修改过后的index.js文件内容，注意第二行代码的impoot指向的是scene下的App.js文件

界面搭建

到这里，准备工作就都做完了，现在开始编写界面的文件，因为这个工程用了三个界面，所以我们再新建三个js文件，分别为loginScene.js、registerScene.js、homeScene.js，三个不同的js文件显示三个不同的界面，最后再用navigation来相互跳转即可(后话)

因为界面的搭建非常简单，所以直接贴代码，如果还有不清楚的，可以参考如下几个链接
《Flex 布局教程：语法篇》——阮一峰
《Flex 布局教程：实例篇》——阮一峰
《React-Native 的基本控件属性方法》——冬瓜小生

LoginScene.js

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

export default class LoginScene extends Component {
   
    render() {
        return (
            <TouchableOpacity  //用可点击的组件作为背景
                activeOpacity={
  1.0}  //设置背景被点击时的透明度改变值
                style={styles.container}>
                <View
                    style={styles.inputBox}>
                    <TextInput
                        style={styles.input}
                        autoCapitalize='none'  //设置首字母不自动大写
                        underlineColorAndroid={
  'transparent'}  //将下划线颜色改为透明
                        placeholderTextColor={
  '#ccc'}  //设置占位符颜色
                        placeholder={
  '用户名'}  //设置占位符
                    />
                </View>
                <View
                    style={styles.inputBox}>
                    <TextInput
                        style={styles.input}
                        autoCapitalize='none'  //设置首字母不自动大写
                        underlineColorAndroid={
  'transparent'}  //将下划线颜色改为透明
                        secureTextEntry={
  true}  //设置为密码输入框
                        placeholderTextColor={
  '#ccc'}  //设置占位符颜色
                        placeholder={
  '密码'}  //设置占位符
                    />
                </View>
                <TouchableOpacity
                    style={styles.button}>
                    <Text
                        style={styles.btText}>登录</Text>  //设置按钮值
                </TouchableOpacity>
                <TouchableOpacity
                    style={styles.button}>
                    <Text
                        style={styles.btText}>注册</Text>  //设置按钮值
                </TouchableOpacity>
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    input: {
        width: 200,
        height: 40,
        fontSize: 20,
        color: '#fff',//输入框输入的文本为白色
    },
    inputBox: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        width: 280,
        height: 50,
        borderRadius: 8,
        backgroundColor: '#58812F',
        marginBottom: 8,
    },
    button: {
        height: 50,
        width: 280,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 8,
        backgroundColor: '#58812F',
        marginTop: 20,
    },
    btText: {
        color: '#fff',
        fontSize: 20,
    }
});

registerScene.js

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

export default class RegisterScene extends Component {
   
    render() {
        return (
            <TouchableOpacity
                activeOpacity={
  1.0}  //设置背景被点击时，透明度不变
                style={styles.container}>
                <View
                    style={styles.inputBox}>
                    <TextInput
                        style={styles.input}
                        autoCapitalize='none'  //设置首字母不自动大写
                        underlineColorAndroid={
  'transparent'}  //将下划线颜色改为透明
                        placeholderTextColor={
  '#ccc'}  //设置占位符颜色
                        placeholder={
  '用户名'}  //设置占位符
                    />
                </View>
                <View
                    style={styles.inputBox}>
                    <TextInput
                        style={styles.input}
                        secureTextEntry={
  true}  //设置为密码输入框
                        autoCapitalize='none'  //设置首字母不自动大写
                        underlineColorAndroid={
  'transparent'}  //将下划线颜色改为透明
                        placeholderTextColor={
  '#ccc'}  //设置占位符颜色
                        placeholder={
  '密码'}  //设置占位符
                    />
                </View>
                <View
                    style={styles.inputBox}>
                    <TextInput
                        style={styles.input}
                        secureTextEntry={
  true}  //设置为密码输入框
                        autoCapitalize='none'  //设置首字母不自动大写
                        underlineColorAndroid={
  'transparent'}  //将下划线颜色改为透明
                        placeholderTextColor