React Native 之 TextInput使用
前言
-
學習本系列內容需要具備一定 HTML 開發基礎,沒有基礎的朋友可以先轉至 HTML快速入門(一) 學習
-
本人接觸 React Native 時間並不是特別長,所以對其中的內容和性質瞭解可能會有所偏差,在學習中如果有錯會及時修改內容,也歡迎萬能的朋友們批評指出,謝謝
-
文章第一版出自簡書,如果出現圖片或頁面顯示問題,煩請轉至 簡書 檢視 也希望喜歡的朋友可以點贊,謝謝
TextInput 文字輸入框
- React Native中的文字輸入框使用和iOS比較相近,可能是因為 RN 首先封裝iOS端的緣故(這點對iOS開發者來說是個好訊息)
-
TextInput也是繼承自 View,所以 View 的屬性 TextInput 也能使用,一些樣式類的屬性可以參照 View 的相關屬性
-
為了更好的講解 TextInput,先建立一個基本的文字輸入框
// 檢視
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 文字輸入框 */}
<TextInput style={styles.textInputStyle}></TextInput>
</View>
);
}
});
// 樣式
var styles = StyleSheet.create({
container: {
flex:1
},
textInputStyle: {
// 設定尺寸
width:width,
height:40,
marginTop:100,
// 設定背景顏色
backgroundColor:'green'
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
效果:
- Value:文字輸入的預設值(注:如果設定了此屬性,會造成無法輸入的尷尬,一般會搭配JS動態設定)
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 文字輸入框 */}
<TextInput
style={styles.textInputStyle}
value="設定了Value"
></TextInput>
</View>
);
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
效果:
- keyboardType:設定鍵盤型別(決定使用哪種鍵盤)
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 文字輸入框 */}
<TextInput
style={styles.textInputStyle}
keyboardType="number-pad"
></TextInput>
</View>
);
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
效果:
- multiline:如果值為真,文字輸入可以輸入多行,預設值為假
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 文字輸入框 */}
<TextInput
style={styles.textInputStyle}
multiline={true}
></TextInput>
</View>
);
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
效果:
- password:如果值為真,文字輸入框就成為一個密碼區域,預設值為假
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 文字輸入框 */}
<TextInput
style={styles.textInputStyle}
password={true}
></TextInput>
</View>
);
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
效果:
- placeholder:在文字輸入之前提示使用者文字框功能,也就是佔位文字
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 文字輸入框 */}
<TextInput
style={styles.textInputStyle}
placeholder="請輸入賬號"
></TextInput>
</View>
);
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
效果:
- placeholderTextColor:佔位字串的文字顏色
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 文字輸入框 */}
<TextInput
style={styles.textInputStyle}
placeholder="請輸入賬號"
placeholderTextColor="red"
></TextInput>
</View>
);
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
效果:
-
autoCapitalize:控制TextInput是否要自動將特定字元切換為大寫
- none:不自動使用任何東西
- sentences:每個句子的首字母(預設)
- words:每一個單詞的首字母
- characters:所有字元
var textInputTest = React.createClass({ render(){ return( <View style={styles.container}> {/* 文字輸入框 */} <TextInput style={styles.textInputStyle} placeholder="none" autoCapitalize="none" ></TextInput> {/* 文字輸入框 */} <TextInput style={styles.textInputStyle} placeholder="sentences" autoCapitalize="sentences" ></TextInput> {/* 文字輸入框 */} <TextInput style={styles.textInputStyle} placeholder="words" autoCapitalize="words" ></TextInput> {/* 文字輸入框 */} <TextInput style={styles.textInputStyle} placeholder="characters" autoCapitalize="characters" ></TextInput> </View> ); } });
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
效果:
-
autoCorrect:如果為false,會關閉拼寫自動修正。預設值是true。
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 文字輸入框 */}
<TextInput
style={styles.textInputStyle}
placeholder="沒有自動改正拼寫"
autoCorrect={false}
></TextInput>
{/* 文字輸入框 */}
<TextInput
style={styles.textInputStyle}
placeholder="自動改正拼寫"
autoCorrect={true}
></TextInput>
</View>
);
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
效果:
- autoFocus:如果為true,在componentDidMount後會獲得焦點。預設值為false。
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 文字輸入框 */}
<TextInput
style={styles.textInputStyle}
autoFocus={true}
></TextInput>
</View>
);
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
效果:
-
clearButtonMode:清除按鈕出現的時機
- never:不出現
- while-editing:編輯的時候出現
- unless-editing:沒有編輯時出現
- always:總是出現
var textInputTest = React.createClass({ render(){ return( <View style={styles.container}> {/* 文字輸入框 */} <TextInput style={styles.textInputStyle} placeholder="never" clearButtonMode="never" ></TextInput> {/* 文字輸入框 */} <TextInput style={styles.textInputStyle} placeholder="while-editing" clearButtonMode="while-editing" ></TextInput> {/* 文字輸入框 */} <TextInput style={styles.textInputStyle} placeholder="unless-editing" clearButtonMode="unless-editing" ></TextInput> {/* 文字輸入框 */} <TextInput style={styles.textInputStyle} placeholder="always" clearButtonMode="always" ></TextInput> </View> ); } });
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
效果:
-
clearTextOnFocus:如果為true,每次開始輸入的時候都會清除文字框的內容
var textInputTest = React.createClass({ render(){ return( <View style={styles.container}> {/* 文字輸入框 */} <TextInput style={styles.textInputStyle} clearTextOnFocus={true} ></TextInput> </View> ); } });
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
效果:
- editable:如果值為假,文字是不可編輯,預設值為真
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 文字輸入框 */}
<TextInput
style={styles.textInputStyle}
editable={false}
></TextInput>
</View>
);
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
效果:
- enablesReturnKeyAutomatically:如果為true,鍵盤會在文字框內沒有文字的時候禁用確認按鈕。預設值為false。
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 文字輸入框 */}
<TextInput
style={styles.textInputStyle}
enablesReturnKeyAutomatically={true}
></TextInput>
{/* 文字輸入框 */}
<TextInput
style={styles.textInputStyle}
enablesReturnKeyAutomatically={false}
></TextInput>
</View>
);
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15<li style="box-sizing:%2
相關推薦
React Native 之 TextInput使用
前言 學習本系列內容需要具備一定 HTML 開發基礎,沒有基礎的朋友可以先轉至 HTML快速入門(一) 學習 本人接觸 React Native 時間並不是特別長,所以對其中的內容和性質瞭解可能會有所偏差,在學習中如果有錯會及時修改內容,也歡迎萬能的朋友們批評指出
React Native之彈框存在TextInput,輸入框有焦點情況下需要點選兩次才可觸發事件-解決
Bug情況描述:React Native專案中,點選按鈕A出現彈框浮層,彈框中需要TextInput輸入數字,鍵盤浮起來;這時候點選 取消按鈕L 或者 確定按鈕R,只是讓鍵盤收起,但是並沒有觸發 取消
React Native之Touchable四組件
width font clas 容易 原生 ber 支持 cit out 一、TouchableHighlight 概念: 本組件用於封裝視圖,使其可以正確響應觸摸操作。當按下的時候,封裝的視圖的不透明度會降低,同時會有一個底層的顏色透過而被用戶看到,使得視圖變暗或變亮。
React Native之登錄界面的布局
處理器 圖片 blank 轉載 圓角 print extends cit hit 版權聲明:本文為博主原創文章,未經博主允許不得轉載。 代碼註釋比較詳細 /** * Sample React Native App * https://github.com/fa
react native 中textInput的value屬性詳解
hold eric 工作 als size 保持 chang 無奈 bsp TextInput用法就不多講了,主要記錄下遇到的一個怪問題。 背景:項目需要開發一個充值頁面,需要一個輸入框,然後幾個按鈕,輸入框是允許用戶自己輸入任意金額,按鈕是可以讓用戶快捷選擇金
react-native之遠程圖片修改後APP不更新
reactnative react-native react native 刷新圖片 base64今天在做客戶的項目時,有一個需求是App上要顯示遠端的圖片,而遠端的圖片有可能會更新,但圖片名不變。在react-native中,顯示圖片是用的自帶的Image組件,大家都知道react在更新組件之前都會判斷pr
使用WebStorm開發React-native之基礎
ttr regexp 渲染 hang reg 路徑 tostring png text 配置問題: (1)找不到SDK路徑,或者沒有SDK對應的版本:SDK必須是android-23才可以(更新SDK) 解決方法:環境變量,必須設置Android_HOME
react-native之模擬器調試
adb div connect oid native 令行 input 模擬 key 手動觸發搖一搖:adb shell input keyevent 82(有時模擬器搖一搖無效) android studio檢測不到模擬器: 命令行cd到模擬器安裝目錄,找到adb.exe
React Native之this詳解
過程 show super try this registry alert item rop this引起的錯誤詳解 我們在學習React Native的過程中,肯定經常遇見過undefined is not an object這樣的問題吧,尤其是剛開始學習的
React Native之屬性類型檢查機制詳解 PropType 變成 prop-types
word man div color object platform UC 靜態 ESS 屬性確認的作用 使用 React Native 創建的組件是可以復用的,所以我們開發的組件可能會給項目組其他同事使用。但別人可能對這個組件不熟悉,常常會忘記使用某些屬性,或者某些屬性傳
react native之listview加下拉重新整理上拉分頁
直接上程式碼 var REQUEST_URL = 'xxxx&page='; import React, { Component } from 'react'; import { AppRegistry, Image, StyleSheet, Text, Vie
ios React-Native 之 找不到標頭檔案
我的解決辦法有點簡單暴力: 將package.json中的"react"直接改成16.2.0, react-native 改成了0.53.3,如下: "dependencies": { "react": "16.2.0", "re
React Native之函式作為引數傳遞給另外一個函式去呼叫
1 用法 我們一般喜歡把js裡面的函式作為引數傳遞給另外一個函式,然後再呼叫這個函式,有點像C語言裡面的函式指標 2 程式碼測試 寫了一個函式,2個引數分別是函式,然後更具資料決定呼叫哪個函式 /** *
React Native之通知欄訊息提示(android)
React Native之通知欄訊息提示(android) 一,需求分析與概述 1.1,推送作為手機應用的基本功能,是手機應用的重要部分,如果自己實現一套推送系統費時費力,所以大部分的應用都會選擇使用第三方的推送服務,如極光推送。 1.2,jpush-react-native
React native 的TextInput失去獲取焦點
<TextInput ref='first' underlineColorAndroid="transparent" autoFocus={firstFlag} editable={firstFlag}
React Native之通知欄訊息提示(ios)
React Native之通知欄訊息提示(ios) 一,需求分析與概述 詳情請檢視:React Native之通知欄訊息提示(android) 二,極光推送註冊與整合 2.1,註冊 詳情請檢視:React Native之通知欄訊息提示(android) 2.2,整合(ios) 第
React Native 之Visual Studio Code 推薦安裝外掛
Visual studio code 是Microsoft在2015年4月30推出 輕量級開發程式碼編輯器。相比Visual studio小了很多,Visual studio安裝Xamarin移動開發100G的C盤快要爆滿了,無力吐槽,普通電腦帶不動Visual studio;還好
react-native之檔案上傳下載
目錄 檔案上傳 1.檔案選擇 2.檔案上傳 1.FormData物件包裝 2.上傳示例 檔案下載 最近react-native專案上需要做檔案上傳下載的功能,由於才接觸react-native不久,好多東西不熟悉,前
React Native之Text控制元件屬性和樣式
屬性 numberOfLines 文字行數限制,新增後超過限制行數文字會在末尾預設以…的形式省略。 ellipsizeMode 設定文字縮略格式,配合numberOfLines使用,values: * tail:在末尾…省略(預設值) * c
React Native之js呼叫Android原生使用Callback傳遞結果給js
1 問題 上面的文章只是呼叫安卓原生顯示Toast,但是我們一般會需要呼叫安卓的程式碼然後去拿回結果給js,但是我們知道在android層js呼叫的這個函式返回值必須的void,所以我們需要用到Callback,Callback一般用於同步,也就是說直接呼叫