基于react native的登录界面demo 超简易教程 redux版

摘要：登录视图登陆失败用户名或密码不能为空弹出提示框成功是点击登录按钮后调用的函数，这里的功能比较简单。通过把发出去密码登录声明组件需要整个中的哪一部分数据作为自己的将和组件联系在一起编写是负责生成的，所以在大项目中还会用到合并。

本猪说

本猪猪刚学react,也刚看RN,就叫写这个，苦不堪言，搭环境就搭了好久。看网上教程也是改了好多小地方才写完了。本着雷锋精神手把手教你写（假的）。

环境以及版本

我用的是安卓模拟器跑的，不过应该ios也适配吧。
这是我的demo的配置依赖的版本

项目结构

红色的框框是需要我们自己建立的，因为这个demo的action比较简单，老师叫我把它写在Login.js里面了，所以没有写在action文件里。

登录视图 screens/Login.js

import React, {Component} from "react";
import { StyleSheet,Text, TextInput, View, Image, TouchableOpacity, Dimensions,Alert} from "react-native";
import {connect} from "react-redux";

var {height, width} = Dimensions.get("window");

class Login extends Component {
    constructor(props) {
        super(props);
    }
    


----------


    onSubmit(userName,password){
        if(userName===""||password===""){
            Alert.alert("登陆失败!用户名或密码不能为空");  //弹出提示框
        } else{
            // 成功
            Alert.alert("user: "+userName+" password:"+password);
        }
    }
   
    // onSubmit()是点击登录按钮后调用的函数，这里的功能比较简单。这里输入不为空都可以，之后的逻辑后面的事了，先让我们取到输入值就ok了

----------
    
    render() {
   
----------

        const {userName,password,dispatch} = this.props;
        
        //这个是es6的赋值语法。
        这里可以获取到dispath，是因为我们在下面会用到**connect**封装。
        当你用React Redux的connect进行封装的时候，connect方法会把dispatch放到props中
----------

        return (
            
                
                {dispatch({type: "LOGINUSER", userName:userName})}}**
                />


----------
组件发出请求，也就是action。通过dispatch把action发出去


----------


                {dispatch({type: "LOGINPASS", password:password})}}**/>
                
                    登录
                

            
        )
    }
}

const styles = StyleSheet.create({
    wrapper:{
        paddingTop:40,
        flex:1,
        alignItems:"center",
        // backgroundColor:"#444",
        backgroundColor:"#e7cbcb"
    },
    textInput:{
        backgroundColor:"#eee",
        borderColor: "gray",
        borderWidth: 2,
        width:width,
        height:60,
        marginBottom:10,
        textAlign:"center",
        fontSize:18
    },
    button: {
        backgroundColor: "#808182",
        // backgroundColor: "#64d0ee",
        height:60,
        width:width
    },
    buttonText: {
        color:"#fff",
        height:60,
        lineHeight:60,
        textAlign:"center",
        fontSize:18,
        fontWeight:"600"
    }
});

//声明组件需要整个 store 中的哪一部分数据作为自己的 props
function selector(store) {
    return {
        userName:store.userName ,
        password:store.password
    }
}

//connect将store和组件联系在一起
export default connect(selector)(Login);

编写renducer reducers/LoginReducer.js

reducer是负责生成state的，所以在大项目中还会用到combineReducers 合并reducer。不过我们这个小，只有一个，就不用了。
ps:我这里后来改了个写法，所以新增了一个文件。

LoginType.js

export const LOGINUSER= "LOGINUSER";
export const LOGINPASS="LOGINPASS";

reducers/LoginReducer.js (这里还装了个依赖redux-actions)

import {handleActions} from "redux-actions";
import {LOGINPASS, LOGINUSER} from "./types/LoginType";

export default handleActions({
    [LOGINUSER] (state, action){
        return {
            ...state,
            userName:action.userName,
        }
    },
    [LOGINPASS] (state, action){
        return {
            ...state,
            password:action.password,
        }
    }
}, {
    userName:"",
    password:""
})

最后App.js 导入我们写好的login组件和reducer

import reducer from "./reducers/LoginReducer";
import {Provider} from "react-redux";
import {createStore} from "redux";
import React, { Component } from "react";

import Login from "./screens/Login";


**let store = createStore(reducer);**

type Props = {};
export default class App extends Component {
    render() {
        return (
            **
                
            **
        )
    }
}

结语

这样就完成这个demo了。我还在接着完善，现在在用react-navigation写登录跳转，loading啥的，所以也可以继续关注哦，写完了就放上来。
谢谢大噶看完了，一起继续努力！越努力越幸运！