• 本豬說

本豬豬剛學(xué)react,也剛看RN,就叫寫這個(gè)，苦不堪言，搭環(huán)境就搭了好久?？淳W(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)槲覀冊(cè)谙旅鏁?huì)用到**connect**封裝。當(dāng)你用React Redux的connect進(jìn)行封裝的時(shí)候，connect方法會(huì)把dispatch放到props中 ----------return (<View style={styles.wrapper}><Imagestyle={{width: 90, height: 90, margin:30, borderRadius:50}}source={{uri:'這里放你可愛的頭像'}}/><TextInput style={styles.textInput} placeholder="請(qǐng)輸入用戶名"**onChangeText={(userName)=>{dispatch({type: 'LOGINUSER', userName:userName})}}**/>---------- 組件發(fā)出請(qǐng)求，也就是action。通過dispatch把a(bǔ)ction發(fā)出去----------<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'} });//聲明組件需要整個(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)目中還會(huì)用到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<Props> {render() {return (**<Provider store={store}><Login /></Provider>**)} }

• 結(jié)語

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

總結(jié)

以上是生活随笔為你收集整理的基于react native的登录界面demo 超简易教程 redux版的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。