RN控件之TextInput
1 /** 2 * Sample React Native App 3 * https://github.com/facebook/react-native 4 */ 5 'use strict'; 6 import React, { 7 AppRegistry, 8 Component, 9 StyleSheet, 10 Text, 11 View, 12 Image, 13 TextInput, 14 } from 'react-native'; 15 16 class MyProject2 extends Component { 17 render() { 18 return ( 19 <View style={{backgroundColor:'#f4f4f4',flex:1}}> 20 <Image style={styles.style_image} source={require('./images/qq.jpg')}/> 21 <TextInput 22 style={styles.style_user_input} 23 placeholder="QQ号/手机号/邮箱" 24 numberOfLines={1} 25 autoFocus={true} 26 underlineColorAndroid={'transparent'} 27 textAlign="center" 28 /> 29 <View style={{height:1,backgroundColor:'#f4f4f4'}}/> 30 <TextInput 31 style={styles.style_pwd_input} 32 placeholder="密码" 33 numberOfLines={1} 34 underlineColorAndroid={'transparent'} 35 secureTextEntry={true} 36 textAlign="center" 37 /> 38 <View style={styles.style_view_commit}> 39 <Text style={{color:'#fff'}}>登录</Text> 40 </View> 41 42 <View style={{flex:1,flexDirection:'row',alignItems:'flex-end',bottom:10}}> 43 <Text style={styles.style_view_unlogin}>无法登录?</Text> 44 <Text style={styles.style_view_register}>新用户</Text> 45 </View> 46 </View> 47 ); 48 } 49 } 50 51 const styles = StyleSheet.create({ 52 style_image:{ 53 borderRadius:35, 54 height:70, 55 width:70, 56 marginTop:40, 57 alignSelf:'center' 58 }, 59 style_user_input:{ 60 backgroundColor:'#fff', 61 marginTop:10, 62 height:35, 63 }, 64 style_pwd_input:{ 65 backgroundColor:'#fff', 66 height:35 67 }, 68 style_view_commit:{ 69 marginTop:15, 70 marginLeft:10, 71 marginRight:10, 72 backgroundColor:'#63bbff', 73 height:35, 74 borderRadius:5, 75 justifyContent:'center', 76 alignItems:'center' 77 }, 78 style_view_unlogin:{ 79 fontSize:12, 80 color:'#63bbff', 81 marginLeft:10, 82 }, 83 style_view_register:{ 84 fontSize:12, 85 color:'#63bbff', 86 marginRight:10, 87 alignItems:'flex-end', 88 flex:1, 89 flexDirection:'row', 90 textAlign:'right' 91 } 92 }); 93 94 AppRegistry.registerComponent('MyProject2', () => MyProject2);
一.TextInput组件介绍
1.TextInput组件跟Image和Text组件差不多,可以添加相关属性(例如:边框颜色,粗细,背景,默认值)以及监听方法(例如:输入信息,焦点变化等事件)
2.属性方法(平台公用以及Android生效的属性方法)
(1)支持View的相关属性
(2)autoCapitalize:控制输入的字符进行切换成大写(参数:'none','sentences','words','characters')
none:不自动切换任何字符大写
sentences:默认每个句子的首字母大写
words:每个单词的首字母变成大写
characters:每个字母全部变成大写
(3)autoCorrect(bool):设置瓶邪自动修正功能,默认开启(true)
(4)autoFocus(bool):设置是否默认获取到焦点,默认为关闭(false).需要comonentDidMount方法调用之后才会获取焦点(componentDidMount是React组件被渲染之后React主动回调的方法)
(5)defaultValue(string):给文本框输入一个默认初始值.
(6)editable(bool):设置文本框是否可以编辑,默认为true,可以进行编辑
(7)keyboard(type):
键盘类型(可选参数:"default", 'email-address', 'numeric', 'phone-pad', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') 该用来选择默认弹出键盘的类型例如我们甚至numeric就是弹出数字键盘。鉴于平台的原因如下的值是所有平台都可以进行通用的
-
-
-
- default
- numeric 数字键盘
- email-address 邮箱地址
-
-
(8)maxLength(number):可以限制文本输入框最大的输入字符长度
(9)multiline (bool) : 设置可以输入多行文字，默认为false(表示无论文本输入多少，都是单行显示)
(10)onBlur (function): 监听方法，文本框失去焦点回调方法
(11)onChange (function): 监听方法,文本框内容发生改变回调方法
(12)onChangeText (function):监听方法，文本框内容发生改变回调方法，该方法会进行传递文本内容
(13)onEndEditing (function):监听方法，当文本结束文本输入回调方法
(14)onFocus (function) :监听方法 文本框获取到焦点回调方法
(15)onLayout (function):监听方法 组价布局发生变化的时候调用，调用方法参数为 {x,y,width,height}
(16)onSubmitEditing (function):监听方法，当编辑提交的时候回调方法。不过如果multiline={true}的时候，该属性就不生效
(17)placeholder (string) :当文本输入框还没有任何输入的时候，默认显示信息，当有输入的时候该值会被清除
(18)placeholderText Color (string): 设置默认信息颜色(placeholer)
(19)secureTextEntry (bool): 设置是否为密码安全输入框 ，默认为false
(20)style 风格属性 可以参考Text组件风格
(21)value ( string ):输入框中的内容值
以上是一些Android，iOS平台通用的属性，下面根据官网的文档，我这边组要讲解一下适用于Android平台的属性方法
(22)numberOfLines (number):设置文本输入框行数，该需要首先设置multiline为true,设置TextInput为多行文本。
(23)textAlign 设置文本横向布局方式 可选参数('start', 'center', 'end')
(24)textAlignVertical: 设置文本垂直方向布局方式 可选参数('top', 'center', 'bottom')
(25)underlineColorAndroid: 设置文本输入框下划线的颜色
