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: 設置文本輸入框下划線的顏色