轉(zhuǎn)載請注明出處：?王亟亟的大牛之路
這些天都在學(xué)習(xí)RN這部分吧，然后寫了個簡單的登陸業(yè)務(wù)，從“實戰(zhàn)”中講解吧
還是繼續(xù)安利：https://github.com/ddwhan0123/Useful-Open-Source-Android依舊日更，會定期添加分組，讓你找“大腿”更方便
先上下效果圖
按鈕控件是第三方的,其他都是源生控件，用第三方就是為了演示下如何在RN環(huán)境下使用第三方庫
構(gòu)思：
登陸界面屬于很能說明問題的Demo案例，這邊主要告訴大家以下幾個知識點
1.如何調(diào)試。
2.如何獲取控件的值。
3.如何彈出Android的Toast。
4.如何使用第三方庫。
5.其他。
登陸/注冊行為通常是 當(dāng)用戶點擊登錄/注冊按鈕后提取輸入框/表單內(nèi)容，進(jìn)行一定的校驗然后做出一定的邏輯處理，然后頁面得有一個Title類似于Android bar之類的至少讓用戶知道頁面的功能差異。
調(diào)試：
要跑一個RN項目首先需要讓他start起來
cd到你的項目目錄,然后start就行
start完一般來說還要統(tǒng)一你的TCP地址，因為你的PC和你的手機(jī)要在同一網(wǎng)域下才可以聯(lián)調(diào)
所以需要adb操作如下
因為是js界面所以你可以不用每次改代碼就要刷新apk,搖一搖reload就行了，很方便
頁面搭建:
在構(gòu)造函數(shù)中申明，password,userName 這兩個state屬性,把按鈕行為綁定給我們自己寫的_handlePress函數(shù)
為了防止頁面長度超過一張頁面，所以在最外層照一個,
(這種頁面要是超長，那肯定是產(chǎn)品或者UI 腦子不正常，但是加下比較穩(wěn))
設(shè)置最外層View讓所有的子控件都居中，默認(rèn)左上，怎么設(shè)置可以看：http://blog.csdn.net/ddwhan0123/article/details/52242409
標(biāo)題整完了就開始搭“表單部分的UI”
這里拿“賬號”部分來做解釋
外層包裹一個水平布局的View,內(nèi)部一個Text 一個TextInput
預(yù)設(shè)一個”android:hint=”input userName”
利用onChangeText回調(diào)方法設(shè)置userName的值為輸入框的 text屬性
然后 再添加按鈕
按鈕是Git上搜的一個第三方庫：https://github.com/ide/react-native-button
要引用也不復(fù)雜，首先cd 到你的項目目錄，然后在CMD/終端輸入
npm install react-native-button --save
他會自己下載，下載完 倒入你的.js文件內(nèi)即可,像這樣
import Button from 'react-native-button'
導(dǎo)好包就可以使用了，之前也說過，React提供了很好的Component封裝，自定義的or等等都可以直接使用
把觸控的傳遞事件傳給了_handlePress方法，控件的參數(shù)也可以用 state里2個聲明過的屬性來獲取。
ok,最后來看下我們的校驗方法_handlePress
根據(jù)2個 state屬性來給變量賦值，然后判斷變量的屬性來顯示不同的Toast
ToastAndroid
和安卓的Api很像
ToastAndroid.show('A pikachu appeared nearby !', ToastAndroid.SHORT);
傳入兩個參數(shù)，一個是要顯示的內(nèi)容，一個是持續(xù)時間
可以ToastAndroid.SHORT或者ToastAndroid.LONG
如果對位置有要求
ToastAndroid.showWithGravity('AllYour Base Are BelongToUs', ToastAndroid.SHORT, ToastAndroid.CENTER);
位置也可以設(shè)置，如下:
ToastAndroid.TOP, ToastAndroid.BOTTOM, ToastAndroid.CENTER
總結(jié)：
整體來說不是很難，理解機(jī)制的話就不復(fù)雜
1.參數(shù)全部可以右state傳遞，通過各種回調(diào)做監(jiān)聽
2.props只作為初始化參數(shù)，因為只能設(shè)一次值
3.用let 做一定的封裝，都是全局變量的話增加代碼復(fù)雜度
4.可以學(xué)習(xí)下React.js 對于理解RN更方便，對于理解RN更方便，對于理解RN更方便 重要的話說三遍?。?！
源碼地址：https://github.com/ddwhan0123/ReactNativeDemo/blob/master/LoginDemo
