前言

本篇主要內(nèi)容如下：

• TextInput組件
• Touchable系列組件
• QQ登錄界面案例

一锦担、TextInput組件

• 通過鍵盤將文本輸入到應(yīng)用程序的一個基本組件慨削，寫法如下：

  <TextInput />
  

• 組件的屬性

  1. placeholder

  占位符缚态，在輸入前顯示的文本內(nèi)容。
  

  2. value

     文本輸入框的默認(rèn)值浆熔，該值設(shè)置過后姨俩，不能在輸入框內(nèi)直接修改，在下一篇會講解修改方式调窍，這個屬性在本篇先不用管邓萨。

  3. placeholderTextColor

     占位符文本的顏色

  4. multiline

     如果為 true，表示多行輸入

  5. editable

     默認(rèn)為 true宝剖。如果設(shè)置為 false 表示不可編輯歉甚。

  6. autoFocus

     如果為 true，則自動獲取焦點

  7. maxLength

     能夠輸入的最長字符數(shù)

  8. secureTextEntry

     默認(rèn)為 false赖钞。如果為 true雪营，則像密碼框一樣隱藏輸入內(nèi)容衡便。

  9. underlineColorAndroid

     設(shè)置默認(rèn)下劃線的顏色，設(shè)置為transparent谴餐，相當(dāng)于讓下劃線消失

• 組件的方法

  1. onChangeText：當(dāng)文本發(fā)生變化時呆抑，調(diào)用該函數(shù)。
  2. onEndEditing：當(dāng)結(jié)束編輯時，調(diào)用該函數(shù)妹萨。也就是當(dāng)輸入框上沒有光標(biāo)去閃爍時代表輸入結(jié)束炫欺。
  3. onBlur：失去焦點時觸發(fā)，和onEndEditong基本上是一樣的
  4. onFocus：獲得焦點時觸發(fā)树姨。
  5. onSubmitEditing：當(dāng)結(jié)束編輯后桥状，點擊鍵盤的提交按鈕觸發(fā)該事件辅斟。

• 接下來通過demo1來了解上面各個屬性的用法

  import React, { Component } from 'react';
  import {
      AppRegistry,
      StyleSheet,
      Text,
      View,
      TextInput
  } from 'react-native';
  
  var MyTextInput = React.createClass({
  
       render(){
  
            return (
  
                   <View style={styles.outerView}>
  
                      <TextInput style={styles.myTextInput}
  
                           placeholder={"請輸入密碼"}
                           placeholderTextColor={"red"}
                           multiline={true}
                           editable={true}
                           autoFocus={true}
                           maxLength={15}
                           secureTextEntry={true}
                           underlineColorAndroid={"transparent"}   
        
                           onChangeText={(text)=>this.changeText(text)}
                           onEndEditing={()=>this.endEditing()}
                           onBlur={()=>this.lostblur()}
                           onFocus={()=>this.getblur()}
                           onSubmitEditing={()=>this.submitEditing()}
  
                        />
  
                 </View>
  
            )
        },
  
        changeText(text){
  
              console.log(text);
  
        },
  
         endEditing(){
  
               alert("結(jié)束編輯");
         },
  
         lostblur(){
  
              alert("失去焦點");
         },
  
         getblur(){
  
              alert("得到焦點");
         },
  
         submitEditing(){
  
              alert("提交");
         }
  })
  
  const styles = StyleSheet.create({
  
         outerView:{
  
              flex:1,
              marginTop:20,
              flexDirection:"row",
         },
  
         myTextInput:{
  
              flex:4,
              height:50,
         },
  })
  
  AppRegistry.registerComponent('demo1', () => MyTextInput);
  

二查邢、組件Touchable系列

• RN的很多組件默認(rèn)都不支持點擊，目前我們學(xué)習(xí)的能夠點擊的組件只有一個Text缓苛，之前我們可以使用Text來實現(xiàn)按鈕邓深，RN其實給我們提供了幾個組件專門讓我們給默認(rèn)不能點擊的組件設(shè)置點擊事件。

• 該系列組件包括四種分別為:TouchableHighlight(觸摸點擊高亮效果),TouchableNativeFeedback(僅限android平臺),TouchableOpacity(透明度變化),TouchableWithoutFeedback钢属。其中最后一個控件是觸摸點擊不帶反饋效果的淆党，另外三個都是有反饋效果讶凉。可以這樣理解前面三個都是繼承自TouchableWithoutFeedback擴展而來荷憋。本篇我只講解一個TouchableOpacity褐望，其他的有興趣可以自行研究。

• TouchableOpacity(透明度變化)

  1. 該組件封裝了響應(yīng)觸摸事件实蔽，當(dāng)點擊按下的時候谨读，該組件的透明度會降低

  2. 常用屬性

     • activeOpacity number

       設(shè)置組件在進行觸摸的時候，顯示的不透明度(取值0-1之間)

     • underlayColor

       當(dāng)觸摸或者點擊控件的時候顯示出的顏色

     • style

       可以設(shè)置控件的風(fēng)格演示铐尚，該風(fēng)格演示可以參考View組件的style

  3. 常見的觸摸事件

     注意：調(diào)用得用箭頭函數(shù)哆姻，比如

      onPress={()=>this.press()}
     

  • onPress 點擊

  • onPressIn 按下

  • onPressOut 抬起

  • onLongPress 長按不放

• 使用方式

  將想要實現(xiàn)點擊的組件用Touchable系列組件給包含起來，然后給Touchable系列組件添加觸摸事件即可,比如讓View組價可點擊

   <TouchableOpacity onPress={()=>this.press()}>'
       <View><View/> 
   <TouchableOpacity/>
  

三统舀、QQ登錄界面

最終效果如下：

點擊按鈕可以彈出當(dāng)前輸入的賬號密碼

代碼及注釋