【React Native開發】React Native控制元件之TextInput元件講解與QQ登入介面實現(11)
轉載請標明出處:
(一)前言
【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新,請大家關注收藏:http://www.lcode.org
今天我們一起來看一下文字輸入框TextInput元件的相關使用講解以及模仿實現一下QQ登入介面的效果。具體環境搭建以及相關配置的請檢視之前的相關文章。
剛建立的React Native技術交流3群(496508742),React Native技術交流4群(458982758),請不要重複加群!歡迎各位大牛,React Native技術愛好者加入交流!同時部落格左側歡迎微信掃描關注訂閱號,移動技術乾貨,精彩文章技術推送!
TextInput元件允許使用者在應用中通過鍵盤進行輸入文字資訊。並且該元件還提供了多種配置屬性例如:自動拼寫修復,自動大小寫切換,佔位預設字元設定以及多種不同型別的鍵盤切換例如:我們可以彈出數字鍵盤。
(二)例項
TextInput元件和前面講的Image或者Text元件差不多,用起來都非常簡單。我們直接在應用中新增一個TextInput元件,然後給該元件新增相關屬性(例:邊框顏色,粗細,背景,預設值)以及監聽方法(例如:輸入資訊,焦點變化等事件)。我們首先看一下官方提供的一個簡單例子:
<TextInput style={{height: 40, borderColor: 'gray',borderWidth: 1}} onChangeText={(text) =>this.setState({text})} value={this.state.text} />
該直接定義了TextInput元件,同時設定元件的風格高度,變寬粗細以及邊框顏色。並且我們這邊監聽了TextInput的onChangeText的事件來進行獲取使用者的輸入資訊。除了該監聽事件方法以外還有onSubmitEditing(提交編輯)以及onFoucs(輸入框獲取焦點的時候呼叫)等相關的監聽方法。
下面在演示另外一個TextInput例項,該建立了三個TextInput,同時每個TextInput都添加了預設資訊(hit),第一個TextInput元件設定高度40,邊框粗細和邊框的顏色,切可以輸入多行資訊。第二個TextInput設定左右額邊距以及自動獲取到焦點。第三個TextInput
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<TextInputstyle={{height:40,borderColor:'red',borderWidth:1}}
multiline={true}
defaultValue='預設資訊1'
/>
<TextInput
style={{marginLeft:10,marginRight:10}}
autoFocus={true}
defaultValue='預設資訊2'/>
<TextInput
editable={false}
defaultValue='預設資訊3'/>
</View>
具體執行效果如下:
(三)屬性方法(這邊講解平臺公用以及Android生效的屬性方法)
3.1.View 支援View的相關屬性
3.2.autoCapitalize控制TextInput輸入的字元進行切換成大寫(可選擇引數:'none', 'sentences', 'words','characters')
- none:不自動切換任何字元成大寫
- sentences:預設每個句子的首字母變成大寫
- words:每個單詞的首字母變成大寫
- characters:每個字母全部變成大寫
3.3.autoCorrect bool設定拼寫自動修正功能預設為開啟(true)
3.4.autoFocusbool 設定是否預設獲取到焦點預設為關閉(false)。該需要componentDidMount方法被呼叫之後才會獲取焦點哦(componentDidMount是React元件被渲染之後React主動回撥的方法)
3.5.defaultValue string給文字輸入設定一個預設初始值。
3.6.editablebool 設定文字框是否可以編輯預設值為true,可以進行編輯
3.7.keyboardType鍵盤型別(可選引數:"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 郵箱地址
3.8.maxLength number 可以限制文字輸入框最大的輸入字元長度
3.9.multiline bool 設定可以輸入多行文字,預設為false(表示無論文字輸入多少,都是單行顯示)
3.10.onBlur function監聽方法,文字框失去焦點回調方法
3.11.onChange function 監聽方法,文字框內容發生改變回調方法
3.12.onChangeText function監聽方法,文字框內容發生改變回調方法,該方法會進行傳遞文字內容
3.13.onEndEditing function監聽方法,當文字結束文字輸入回撥方法
3.14.onFocus function 監聽方法文字框獲取到焦點回調方法
3.15.onLayout function監聽方法組價佈局發生變化的時候呼叫,呼叫方法引數為 {x,y,width,height}
3.16.onSubmitEditing function監聽方法,當編輯提交的時候回撥方法。不過如果multiline={true}的時候,該屬性就不生效
3.17.placeholer string 當文字輸入框還沒有任何輸入的時候,預設顯示資訊,當有輸入的時候該值會被清除
3.18.placeholerTextColor string設定預設資訊顏色(placeholer)
3.19.secureTextEntry bool 設定是否為密碼安全輸入框,預設為false
3.20.style 風格屬性可以參考Text元件風格
3.21.value string輸入框中的內容值
以上是一些Android,iOS平臺通用的屬性,下面根據官網的文件,我這邊組要講解一下適用於Android平臺的屬性方法
3.22.numberOfLinesnumber設定文字輸入框行數,該需要首先設定multiline為true,設定TextInput為多行文字。
3.23.textAlign設定文字橫向佈局方式可選引數('start', 'center', 'end')
3.24.textAlignVertical設定文字垂直方向佈局方式可選引數('top', 'center', 'bottom')
3.25.underlineColorAndroid設定文字輸入框下劃線的顏色
(四)TextInput實戰-仿照QQ登入介面
下面我們來仿照QQ登入介面的效果,進行佈局一下,具體實現程式碼如下:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
Image,
View,
TextInput,
} from'react-native';
class TestInputextends Component {
render() {
return (
<Viewstyle={{backgroundColor:'#f4f4f4',flex:1}}>
<Image
style={styles.style_image}
source={require('./img/app_icon.png')}/>
<TextInput
style={styles.style_user_input}
placeholder='QQ號/手機號/郵箱'
numberOfLines={1}
autoFocus={true}
underlineColorAndroid={'transparent'}
textAlign='center'
/>
<View
style={{height:1,backgroundColor:'#f4f4f4'}}
/>
<TextInput
style={styles.style_pwd_input}
placeholder='密碼'
numberOfLines={1}
underlineColorAndroid={'transparent'}
secureTextEntry={true}
textAlign='center'
/>
<View
style={styles.style_view_commit}
>
<Text style={{color:'#fff'}}>
登入
</Text>
</View>
<Viewstyle={{flex:1,flexDirection:'row',alignItems: 'flex-end',bottom:10}}>
<Textstyle={styles.style_view_unlogin}>
無法登入?
</Text>
<Textstyle={styles.style_view_register}>
新使用者
</Text>
</View>
</View>
);
}
}
const styles =StyleSheet.create({
style_image:{
borderRadius:35,
height:70,
width:70,
marginTop:40,
alignSelf:'center',
},
style_user_input:{
backgroundColor:'#fff',
marginTop:10,
height:35,
},
style_pwd_input:{
backgroundColor:'#fff',
height:35,
},
style_view_commit:{
marginTop:15,
marginLeft:10,
marginRight:10,
backgroundColor:'#63B8FF',
height:35,
borderRadius:5,
justifyContent: 'center',
alignItems: 'center',
},
style_view_unlogin:{
fontSize:12,
color:'#63B8FF',
marginLeft:10,
},
style_view_register:{
fontSize:12,
color:'#63B8FF',
marginRight:10,
alignItems:'flex-end',
flex:1,
flexDirection:'row',
textAlign:'right',
}
});
AppRegistry.registerComponent('TestInput',() => TestInput);
執行效果如下:
(五)最後總結
今天我們主要給大家介紹TextInput元件,以及通過一個QQ登入介面具體例項把之前的View,Text,Image元件的基本使用串聯了一下。大家有問題可以加一下群React Native技術交流群(282693535)或者底下進行回覆一下。
關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),專案管理以及部落格文章!(歡迎關注,第一時間推送精彩文章)
關注我的微博,可以獲得更多精彩內容
相關推薦
【React Native開發】React Native控制元件之TextInput元件講解與QQ登入介面實現(11)
轉載請標明出處:(一)前言 【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新,請大家關注收藏:http://www.lcode.org 今天我們一起來看一下文字輸入框TextInput元件的相關使用講解以及模仿實現一下QQ登入介面的效果。具體環境搭建以及相關配置
【React Native開發】React Native控制元件之Image元件講解與美團首頁頂部效果例項(10)
轉載請標明出處:(一)前言 【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新,請大家關注收藏:http://www.lcode.org 今天我們一起來看一下Image元件的相關使用講解以及模仿實現一下美團首頁頂部分類的效果。具體環境搭建以及相關配置的請檢視之前
【React Native開發】React Native控制元件之ListView元件講解以及最齊全例項(19)
轉載請標明出處:(一)前言 【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新,請大家關注收藏:http://www.lcode.org今天我們一起來看一下ListView元件的使用詳解以及具體事例剛建立的React Native技術交流3群(496508742),Rea
【React Native開發】React Native控制元件之View檢視講解(7)
轉載請標明出處:(一)前言 【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新,請大家關注收藏:http://www.lcode.org 現在幾講我們對於R
【React Native開發】React Native控制元件之RefreshControl元件詳解(21)
轉載請標明出處:(一)前言 【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新,請大家關注收藏:http://www.lcode.org 今天我們一起來看一下RefreshControl下拉重新整理元件講解以及使用例項剛建立的React Native技術交
【React Native開發】React Native控制元件之DrawerLayoutAndroid抽屜導航切換元件講解(13)
轉載請標明出處:(一)前言 【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新,請大家關注收藏:http://www.lcode.org 今天我們一起來看一
【React Native開發】React Native控制元件之Switch開關與Picker選擇器元件講解以及使用(16)
轉載請標明出處:(一)前言 【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新,請大家關注收藏:http://www.lcode.org 今天我們一起來看
【React Native開發】React Native控件之ProgressBarAndroid進度條解說(12)
ice 發現 來講 top 文章 func dev all ios 轉載請標明出處:http://blog.csdn.net/developer_jiangqq/article/details/50596367本文出自:【江清清的博客】(一)前言 【好消息】
【FastDev4Android框架開發】AndroidAnnnotations注入框架使用之最佳實踐SharedPreferences(十七)
轉載請標明出處: (一).前言: 前面我們已經對於AndroidAnnotations使用Adapters和lists做了講解,今天我們開始具體學習一下使用DI框架SharedPrefe
Android 開發:(三)安卓常用控制元件以及仿《微門戶》登入介面實現
一、常用控制元件: 1、文字類控制元件 TextView 負責展示文字,非編輯 EditText 可編輯文字控制元件 2、按鈕類控制元件 Button 按鈕 ImageButton 圖片按鈕 RadioButton與RadioGroup 單
【OpenCV3影象處理】Mat類詳解 之 元素的獲取與賦值 ( 對比.at<>()函式 和 .ptr<>()函式)
Mat中畫素的獲取與賦值 計算機視覺中,影象的讀取是影象處理的基礎,影象就是一系列畫素值,OpenCV使用資料結構cv::Mat來儲存影象。cv::Mat是一個矩陣類,矩陣中每一個元素都代表一個畫素,對於灰度影象,畫素用8位無符號數,0表示黑色,255表示白色。對於彩色
【React Native開發】關於fetch方法設定cookie
一般來說,在網上隨便搜一下,都會有文章說fetch方法預設是不攜帶cookie的,要想攜帶cookie, 需要新增: credentials: 'include' 例如: fetch(url, { method: 'POST', headers: {
【React Native開發】關於UTC格式時間轉換為時間戳的問題
問題背景: 需要將UTC格式的時間字串(形如2018-10-30T07:00:00+0000)轉換為時間戳(形如1540882800) 問題描述: var time=new Date("2018-10-30T07:00:00+0000"); 發現release(sto
【React Native開發】
很多時候我們需要在App中嵌入一個活動頁面我們需要不定時的開始一個活動,又不定時的結束一個活動。如果使用Native 開發,需要更新APP,這對應使用者來說,是很不好的體驗,因此,我們可以藉助WebV
【React Native開發】- 觸控事件處理
1.介紹 React Native提供了可以處理觸控事件的元件。觸控即點選、長按、滑動、縮放。 2.點選 處理點選操作事件,可以使用Touchable類元件,通過此類元件的onPress屬性實現點選事
【巨能坑】react-native的大坑,不定期更新
注:寫頁面時,當子元件是<Text>時一定不要固定父元件的寬高。 ----------------------------------------------------------------------------------------------
【RN踩坑】React-native 0.45版本以上出現 boost_1_63_0.tar.gz等錯誤
請先下載第三方依賴檔案 下下來後請放置到 ~/.rncache 目錄 比如你可以開啟終端,輸入 # 井號表示註釋,不要複製井號開頭的句子 # 進入~目錄,即使用者目錄 cd ~
React-Native開發十 react-navigation開發中的一些常見的坑
1 前言 都說RN開發效率高,一次學習隨處編寫。真的用RN開發了一個APP才知道,RN中坑真是太多,特別是很多坑只有在生產模式下才會出現,在平常的debug模式下,APP執行好好的,但是你一旦打正式包,就會發現各種報錯,各種崩潰,如果在Android平臺下,各種相容性,各種奇葩的問題
React-Native開發九 react-navigation之Android的打包與釋出
1前言 RN的開發中正式釋出前需要打包與簽名,然後才能上架各家應用市場。打包需要將js與圖片資原始檔打包進apk檔案中,生成index.android.bundle與index.android.bundle.meta檔案。下面介紹RN開發中打包APK的主要步驟,IOS沒研究過,不再本
React-Native開發八 react-navigation之自定義元件Counter
1 前言 我們知道RN中任何介面元素都可以看成元件,小到一個按鈕,大到一個頁面。RN開發就是不停的開發元件和使用元件,並讓他們協同工作,這樣高效率協同的執行起來,這樣就能完成一個APP的功能了 在實際的開發中,我們經常需要自定義一些滿足我們專案開發的自定義元件,類似於Android