• 本猪说

本猪猪刚学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 (
            <View style={styles.wrapper}>
                <Image
                    style={{width: 90, height: 90, margin:30, borderRadius:50}}
                    source={{uri:'这里放你可爱的头像'}}
                />
                <TextInput style={styles.textInput} placeholder="请输入用户名"
                           **onChangeText={(userName)=>{dispatch({type: 'LOGINUSER', userName:userName})}}**
                />


----------
组件发出要求，也就是action。经由过程dispatch把action发出去


----------


                <TextInput style={styles.textInput} placeholder="暗码" secureTextEntry={true}
                           **onChangeText={(password)=>{dispatch({type: 'LOGINPASS', password:password})}}**/>
                <TouchableOpacity style={styles.button} activeOpacity={0.6} **onPress={this.onSubmit.bind(this,userName,password)}**>
                    <Text style={styles.buttonText}>登录</Text>
                </TouchableOpacity>

            </View>
        )
    }
}

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<Props> {
    render() {
        return (
            **<Provider store={store}>
                <Login />
            </Provider>**
        )
    }
}

• 结语

如许就完成这个demo了。我还在接着完美，如今在用react-navigation写登录跳转，loading啥的，所以也能够继承关注哦，写完了就放上来。
感谢大噶看完了，一同继承勤奋！越勤奋越荣幸！