摘要：登錄視圖登陸失敗用戶名或密碼不能為空彈出提示框成功是點擊登錄按鈕后調用的函數，這里的功能比較簡單。通過把發出去密碼登錄聲明組件需要整個中的哪一部分數據作為自己的將和組件聯系在一起編寫是負責生成的，所以在大項目中還會用到合并。

本豬說

本豬豬剛學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啥的，所以也可以繼續關注哦，寫完了就放上來。
謝謝大噶看完了，一起繼續努力！越努力越幸運！