摘要：登錄視圖登陸失敗用戶名或密碼不能為空彈出提示框成功是點(diǎn)擊登錄按鈕后調(diào)用的函數(shù)，這里的功能比較簡單。通過把發(fā)出去密碼登錄聲明組件需要整個(gè)中的哪一部分?jǐn)?shù)據(jù)作為自己的將和組件聯(lián)系在一起編寫是負(fù)責(zé)生成的，所以在大項(xiàng)目中還會用到合并。

本豬說

本豬豬剛學(xué)react,也剛看RN,就叫寫這個(gè)，苦不堪言，搭環(huán)境就搭了好久。看網(wǎng)上教程也是改了好多小地方才寫完了。本著雷鋒精神手把手教你寫（假的）。

環(huán)境以及版本

我用的是安卓模擬器跑的，不過應(yīng)該ios也適配吧。
這是我的demo的配置依賴的版本

項(xiàng)目結(jié)構(gòu)

紅色的框框是需要我們自己建立的，因?yàn)檫@個(gè)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()是點(diǎn)擊登錄按鈕后調(diào)用的函數(shù)，這里的功能比較簡單。這里輸入不為空都可以，之后的邏輯后面的事了，先讓我們?nèi)〉捷斎胫稻蚾k了

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

        const {userName,password,dispatch} = this.props;
        
        //這個(gè)是es6的賦值語法。
        這里可以獲取到dispath，是因?yàn)槲覀冊谙旅鏁玫?*connect**封裝。
        當(dāng)你用React Redux的connect進(jìn)行封裝的時(shí)候，connect方法會把dispatch放到props中
----------

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


----------
組件發(fā)出請求，也就是action。通過dispatch把a(bǔ)ction發(fā)出去


----------


                {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"
    }
});

//聲明組件需要整個(gè) store 中的哪一部分?jǐn)?shù)據(jù)作為自己的 props
function selector(store) {
    return {
        userName:store.userName ,
        password:store.password
    }
}

//connect將store和組件聯(lián)系在一起
export default connect(selector)(Login);

編寫renducer reducers/LoginReducer.js

reducer是負(fù)責(zé)生成state的，所以在大項(xiàng)目中還會用到combineReducers 合并reducer。不過我們這個(gè)小，只有一個(gè)，就不用了。
ps:我這里后來改了個(gè)寫法，所以新增了一個(gè)文件。

LoginType.js

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

reducers/LoginReducer.js (這里還裝了個(gè)依賴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 導(dǎo)入我們寫好的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 (
            **
                
            **
        )
    }
}

結(jié)語

這樣就完成這個(gè)demo了。我還在接著完善，現(xiàn)在在用react-navigation寫登錄跳轉(zhuǎn)，loading啥的，所以也可以繼續(xù)關(guān)注哦，寫完了就放上來。
謝謝大噶看完了，一起繼續(xù)努力！越努力越幸運(yùn)！