React Native06 - TextInput组件、Touchable系列组件、QQ登录界面

前言

本篇主要内容如下：

• TextInput组件
• Touchable系列组件
• QQ登录界面案例

一、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 (
  
                   
  
                      this.changeText(text)}
                           onEndEditing={()=>this.endEditing()}
                           onBlur={()=>this.lostblur()}
                           onFocus={()=>this.getblur()}
                           onSubmitEditing={()=>this.submitEditing()}
  
                        />
  
                 
  
            )
        },
  
        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组价可点击

   this.press()}>'
        
   
  

三、QQ登录界面

最终效果如下：

点击按钮可以弹出当前输入的账号密码

代码及注释