前言

本篇主要內容如下：

• TextInput元件
• Touchable系列元件
• QQ登入介面案例

一、TextInput元件

• 通過鍵盤將文字輸入到應用程式的一個基本元件，寫法如下：

  <TextInput />
  

• 元件的屬性

  1. placeholder

  佔位符，在輸入前顯示的文字內容。
  

  2. value

     文字輸入框的預設值，該值設定過後，不能在輸入框內直接修改，在下一篇會講解修改方式，這個屬性在本篇先不用管。

  3. placeholderTextColor

     佔位符文字的顏色

  4. multiline

     如果為 true，表示多行輸入

  5. editable

     預設為 true。如果設定為 false 表示不可編輯。

  6. autoFocus

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

  7. maxLength

     能夠輸入的最長字元數

  8. secureTextEntry

     預設為 false。如果為 true，則像密碼框一樣隱藏輸入內容。

  9. underlineColorAndroid

     設定預設下劃線的顏色，設定為transparent，相當於讓下劃線消失

• 元件的方法

  1. onChangeText：當文字發生變化時，呼叫該函式。
  2. onEndEditing：當結束編輯時，呼叫該函式。也就是當輸入框上沒有游標去閃爍時代表輸入結束。
  3. onBlur：失去焦點時觸發，和onEndEditong基本上是一樣的
  4. onFocus：獲得焦點時觸發。
  5. onSubmitEditing：當結束編輯後，點選鍵盤的提交按鈕觸發該事件。

• 接下來通過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("結束編輯");
         },
  
         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的很多元件預設都不支援點選，目前我們學習的能夠點選的元件只有一個Text，之前我們可以使用Text來實現按鈕，RN其實給我們提供了幾個元件專門讓我們給預設不能點選的元件設定點選事件。

• 該系列元件包括四種分別為:TouchableHighlight(觸控點選高亮效果),TouchableNativeFeedback(僅限android平臺),TouchableOpacity(透明度變化),TouchableWithoutFeedback。其中最後一個控制元件是觸控點選不帶反饋效果的，另外三個都是有反饋效果。可以這樣理解前面三個都是繼承自TouchableWithoutFeedback擴充套件而來。本篇我只講解一個TouchableOpacity，其他的有興趣可以自行研究。

• TouchableOpacity(透明度變化)

  1. 該元件封裝了響應觸控事件，當點選按下的時候，該元件的透明度會降低

  2. 常用屬性

     • activeOpacity number

       設定元件在進行觸控的時候，顯示的不透明度(取值0-1之間)

     • underlayColor

       當觸控或者點選控制元件的時候顯示出的顏色

     • style

       可以設定控制元件的風格演示，該風格演示可以參考View元件的style

  3. 常見的觸控事件

     注意：呼叫得用箭頭函式，比如

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

  • onPress 點選

  • onPressIn 按下

  • onPressOut 抬起

  • onLongPress 長按不放

• 使用方式

  將想要實現點選的元件用Touchable系列元件給包含起來，然後給Touchable系列元件新增觸控事件即可,比如讓View組價可點選

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

三、QQ登入介面

最終效果如下：

點選按鈕可以彈出當前輸入的賬號密碼

程式碼及註釋