(1)TextInput文本輸入框
TextInput屬性
- (1) keyboardType ：設置鍵盤類型（決定使用哪種鍵盤）
'email-address' ： 郵箱鍵盤
'numeric' ：數字鍵盤
'phone-pad' ：
- (2) secureTextEntry ：如果為true，文本框會遮住之前輸入的文字，這樣類似密碼之類的敏感文字可以更加安全。默認值為false。( secure安全的意思 ) （ entry輸入的意思 ）
- (3) placeholder ：在文本輸入之前提示用戶文本框功能，也就是占位文字
- (4) placeholderTextColor：占位字符串的文本顏色
- (5) autoFocus：如果為true，在componentDidMount后會獲得焦點。默認值為false。
- (6) selectionColor ：設置輸入框高亮時的顏色（在iOS上還包括光標）
- (6) editable：如果值為假，文本是不可編輯，默認值為真7
- (7) maxLength ：限制文本框中最多的字符數。使用這個屬性而不用JS邏輯去實現，可以避免閃爍的現象。
- (8) multiline：如果值為真，文本輸入可以輸入多行，默認值為假 （ multiline：多線路的 ）
- (9) onFocus ：當文本框 （獲得）焦點的時候調用此回調函數。
- (10) onBlur ：當文本框 （失去） 焦點的時候調用此回調函數。
- (11) onChange：當文本框內容變化時調用此回調函數
- (12) onChangeText：當文本框內容變化時調用此回調函數。改變后的文字內容會作
為參數傳遞
onChangeText={ (text) => {
this.setState({
phoneNumber: text
}) //當文本框內容發生改變時，將文本框中輸入的字符傳給state
} }
- (13) onEndEditing ：當文本輸入結束后調用此回調函數。
- (14) inlineImageLef ：指定一個圖片放置在左側。
- (15) androidinlineImagePadding ：給放置在左側的圖片設置padding樣式。
- (16) autoCapitalize ：控制TextInput是否要自動將特定字符切換為大寫：
'characters': 所有的字符。
'words': 每個單詞的第一個字符。
'sentences': 每句話的第一個字符（默認）。
' none': 不自動切換任何字符為大寫。
- (17) autoCorrect ：如果為false，會關閉拼寫自動修正。默認值是true。
-
(18) underlineColorAndroid ：文本框的下劃線顏色(譯注：如果要去掉文本框的邊框，請將此屬性設為透明transparent)。
http://reactnative.cn/docs/0.46/textinput.html#content
http://www.lxweimin.com/p/2f702b52b321
(2) Fetch中的post請求
(1) JSON.parse() ：
解析一個JSON字符串，可選地轉換生成的值及其屬性，并返回值。（ 屬性:值）（ key:value ）
換一種說法是：JSON.parse() 方法解析一個JSON字符串，構造由字符串描述的JavaScript值或對象。可以提供可選的reviver函數以在返回之前對所得到的對象執行變換。
(2) JSON.stringify()
返回與指定值相對應的一個JSON字符串，可選地僅包含某些屬性或以用戶定義的方式替換屬性值。
// 將字符串JSON格式化
JSON.parse(responseData)
// 將JSON數據轉化為字符串
JSON.stringify(responseData)
//更新數據源
this.setState({
dataSource:this.state.dataSource.cloneWithRows(JSON.parse(responseData).data)
});
(3) Post請求
執行POST提交，我們可以將method屬性值設置為post，并且在body屬性值中設置需要提交的數據。
fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
})
})
-------------------------------------
譯注：如果你的服務器無法識別上面POST的數據格式，那么可以嘗試傳統的form格式，示例如下：
fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: 'key1=value1&key2=value2'
})
-------------------------------------
POST請求實例：
fetch("http://rapapi.org/mockjs/22101/api/u/signup",{
method:'POST',
headers:{
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body:JSON.stringify( 'phoneNumber': 'phoneNumber1' )
}).then( (response) => response.json() )
.then( (data)=> {
console.log(data.success)
if(data && data.success){
_this.showVerifyCode();
}else{
alert('發送驗證碼失敗');
}
}).catch( (err) => {
alert('獲取驗證碼失敗');
})
http://www.cnblogs.com/keyi/p/6721710.html
http://www.lxweimin.com/p/7c097051b5dc
http://www.51xuediannao.com/javascript/fetchdyf_fetchxydajaxqqfa__1142.html
http://blog.csdn.net/blueheart20/article/details/45174399
https://zhidao.baidu.com/question/7345375.html
iOS9對https的調整,需要在項目的info.plist添加Key：NSAllowsArbitraryLoads,具體方法看http://www.cnblogs.com/shaoting/p/5148323.html
（這里有個巨坑）http://blog.csdn.net/haoranli/article/details/60960858
{
this.state.codeSent
? <TouchableNativeFeedback onPress={ this._submit }>
<Text style={ styles.btn}>登陸</Text>
</TouchableNativeFeedback>
:
<TouchableNativeFeedback onPress= { this._sendVerifyCode.bind(this) }>
<Text style={ styles.btn}>獲取驗證碼</Text>
</TouchableNativeFeedback>
}
如果不用bind(this)會出現報錯
·
(4)驗證碼倒計時 setInterval() 和 clearInterval()
coutDown() {
this.setState({
MainTime:60,
MainTimeTitle: ''
});
this.bb = setInterval( () => {
var aa = this.state.MainTime - 1;
if( aa ===0){
clearInterval( this.bb );
this.setState({
MainTime:'',
MainTimeTitle: '重新獲取'
})}else{
this.setState({
MainTime: aa,
MainTimeTitle: ''
})
}
},1000)
}
-------------------------------------
<Text
onPress={ this.coutDown.bind(this) }
style={ styles.time}
>{this.state.MainTime}{this.state.MainTimeTitle}
</Text>
http://www.lxweimin.com/p/819259d09609
(踩坑) ：這樣寫的話會有個警告（如下，如圖）：
countDown()中的bb方法一直在執行
（解決方法）如下：
Waring: Can only update a mounted or mounting component.
分析：可以看到在 countdown方法中每秒中調用一次bb方法去遞減秒數，
當組件unmounted之后這個timer并沒有停止，所以出現了上面的問題。
--------------------------------------------------------
解決方法：
將每次setInterval返回的ID保存起來，在componentWillUnmount方法中clearInterval
--------------------------------------------------------
完整代碼：
//組件將被卸載
componentWillUnmount() {
clearInterval(this.state.timeId)
}
//倒計時
coutDown() {
this.setState({
MainTime:60,
MainTimeTitle: ''
});
this.bb = setInterval( () => {
var aa = this.state.MainTime - 1;
if( aa ===56 ){
clearInterval( this.bb );
this.setState({
MainTime:'',
MainTimeTitle: '重新獲取'
})}else{
this.setState({
MainTime: aa,
MainTimeTitle: ''
})
}
},1000)
this.setState({
timeId: this.bb
});
}
http://blog.csdn.net/tujiaw/article/details/58238975
(5) 提交手機號和驗證碼
(1) 登陸按鈕觸發事件：
{
this.state.codeSent
? <TouchableNativeFeedback onPress={ this._submit.bind(this) }>
<Text style={ styles.btn}>登陸</Text>
</TouchableNativeFeedback>
:
<TouchableNativeFeedback onPress= { this._sendVerifyCode.bind(this) }>
<Text style={ styles.btn}>獲取驗證碼</Text>
</TouchableNativeFeedback>
}
(2) 登陸函數
_submit(){
var that = this;
var loginPhoneNumber = this.state.phoneNumber;
var loginVerifyCode = this.state.verifyCode;
// console.log(loginPhoneNumber);
// console.log(loginVerifyCode);
if(!loginPhoneNumber || !loginVerifyCode ){
return alert( 手機號或者驗證碼錯誤 );
}else{
fetch("http://rapapi.org/mockjs/22101/api/u/verify",{
method:'POST',
header: {
'Accept':'application/json',
'Content-Type':'application/json'
},
body: JSON.stringify({
'phoneNumber':'loginPhoneNumber',
'verifyCode': 'loginVerifyCode'
})
}).then( (response) => response.json() )
.then((data) => {
if(data && data.success){
// console.log(data)
// console.log(data.success)
// console.log( MOCK.mock(data) )
var data = MOCK.mock(data).data;
var stringify = JSON.stringify(data);
console.log(stringify);
// console.log(data.success) //值是true
// that.props.afterLogin(stringify);
// console.log(data)
that.props.afterLogin(stringify);
}else{
alert('發送驗證碼失敗22222222222');
}
})
.catch( (err) => {
alert('獲取驗證碼失敗333333333333');
})
}
}
(3) 子組件傳值給父組件
_afterLogin(user) {
var that = this;
// user = JSON.stringify(user);
AsyncStorage.setItem('user',user)
.then( ()=> {
console.log( AsyncStorage.getItem(user) )
that.setState({
logined: false,
user: user
})
console.log(that.state.logined)
})
// this.setState(user)
}
render(){
console.log( this.state.logined ); //true
if(this.state.logined) {
return <Login afterLogin={ this._afterLogin.bind(this) }/>;
};
return(
<Go></Go>
)
}
這里可以理解為，父組件傳遞一個方法給子組件，子組件將（值）作為參數返回給父組件，父組件回調
http://blog.csdn.net/hehe0705/article/details/65631768
效果圖：
20170724142429.gif
(6) AsyncStorage異步存儲
AsyncStorage是一個簡單的、異步的、持久化的Key-Value存儲系統，它對于App來說是全局性的。它用來代替LocalStorage。
-
AsyncStorage.getItem() ：存值
QQ截圖20170724144623.png
