前言
學(xué)習(xí)本系列內(nèi)容需要具備一定 HTML 開發(fā)基礎(chǔ)，沒有基礎(chǔ)的朋友可以先轉(zhuǎn)至 HTML快速入門(一) 學(xué)習(xí)
本人接觸 React Native 時(shí)間并不是特別長褂策，所以對其中的內(nèi)容和性質(zhì)了解可能會(huì)有所偏差质礼，在學(xué)習(xí)中如果有錯(cuò)會(huì)及時(shí)修改內(nèi)容，也歡迎萬能的朋友們批評指出，謝謝
文章第一版出自簡書系奉，如果出現(xiàn)圖片或頁面顯示問題珊燎，煩請轉(zhuǎn)至 簡書 查看 也希望喜歡的朋友可以點(diǎn)贊惭嚣，謝謝
TextInput 文本輸入框
React Native中的文本輸入框使用和iOS比較相近，可能是因?yàn)?RN 首先封裝iOS端的緣故（這點(diǎn)對iOS開發(fā)者來說是個(gè)好消息）
TextInput也是繼承自 View,所以 View 的屬性 TextInput 也能使用悔政，一些樣式類的屬性可以參照 View 的相關(guān)屬性
為了更好的講解 TextInput晚吞，先創(chuàng)建一個(gè)基本的文本輸入框
// 視圖
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 文本輸入框 */}
<TextInput style={styles.textInputStyle}></TextInput>
</View>
);
}
});
// 樣式
var styles = StyleSheet.create({
container: {
flex:1
},
textInputStyle: {
// 設(shè)置尺寸
width:width,
height:40,
marginTop:100,
// 設(shè)置背景顏色
backgroundColor:'green'
}
});
效果：
初始化效果.gif
- Value：文本輸入的默認(rèn)值（注：如果設(shè)置了此屬性，會(huì)造成無法輸入的尷尬谋国，一般會(huì)搭配JS動(dòng)態(tài)設(shè)置）
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 文本輸入框 */}
<TextInput
style={styles.textInputStyle}
value="設(shè)置了Value"
></TextInput>
</View>
);
}
});
效果：
設(shè)置了Value.gif
- keyboardType：設(shè)置鍵盤類型（決定使用哪種鍵盤）
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 文本輸入框 */}
<TextInput
style={styles.textInputStyle}
keyboardType="number-pad"
></TextInput>
</View>
);
}
});
效果：
設(shè)置鍵盤類型.gif
- multiline：如果值為真槽地，文本輸入可以輸入多行，默認(rèn)值為假
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 文本輸入框 */}
<TextInput
style={styles.textInputStyle}
multiline={true}
></TextInput>
</View>
);
}
});
效果：
多行輸入.gif
- password：如果值為真芦瘾，文本輸入框就成為一個(gè)密碼區(qū)域捌蚊，默認(rèn)值為假
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 文本輸入框 */}
<TextInput
style={styles.textInputStyle}
password={true}
></TextInput>
</View>
);
}
});
效果：
密碼模式.gif
- placeholder：在文本輸入之前提示用戶文本框功能，也就是占位文字
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 文本輸入框 */}
<TextInput
style={styles.textInputStyle}
placeholder="請輸入賬號"
></TextInput>
</View>
);
}
});
效果：
占位文字.gif
- placeholderTextColor：占位字符串的文本顏色
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 文本輸入框 */}
<TextInput
style={styles.textInputStyle}
placeholder="請輸入賬號"
placeholderTextColor="red"
></TextInput>
</View>
);
}
});
效果：
占位文字顏色.gif
-
autoCapitalize：控制TextInput是否要自動(dòng)將特定字符切換為大寫
- none：不自動(dòng)使用任何東西
- sentences：每個(gè)句子的首字母（默認(rèn)）
- words：每一個(gè)單詞的首字母
- 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> ); } });
效果：
autoCapitalize.gif
- autoCorrect：如果為false近弟，會(huì)關(guān)閉拼寫自動(dòng)修正缅糟。默認(rèn)值是true。
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 文本輸入框 */}
<TextInput
style={styles.textInputStyle}
placeholder="沒有自動(dòng)改正拼寫"
autoCorrect={false}
></TextInput>
{/* 文本輸入框 */}
<TextInput
style={styles.textInputStyle}
placeholder="自動(dòng)改正拼寫"
autoCorrect={true}
></TextInput>
</View>
);
}
});
效果：
autoCorrect.gif
- autoFocus：如果為true祷愉，在componentDidMount后會(huì)獲得焦點(diǎn)窗宦。默認(rèn)值為false。
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 文本輸入框 */}
<TextInput
style={styles.textInputStyle}
autoFocus={true}
></TextInput>
</View>
);
}
});
效果：
autoFocus.gif
-
clearButtonMode：清除按鈕出現(xiàn)的時(shí)機(jī)
- never：不出現(xiàn)
- while-editing：編輯的時(shí)候出現(xiàn)
- unless-editing：沒有編輯時(shí)出現(xiàn)
- always：總是出現(xiàn)
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> ); } });
效果：
clearButtonMode.gif
-
clearTextOnFocus：如果為true二鳄，每次開始輸入的時(shí)候都會(huì)清除文本框的內(nèi)容
var textInputTest = React.createClass({ render(){ return( <View style={styles.container}> {/* 文本輸入框 */} <TextInput style={styles.textInputStyle} clearTextOnFocus={true} ></TextInput> </View> ); } });
效果：
clearTextOnFocus.gif
- editable：如果值為假赴涵，文本是不可編輯，默認(rèn)值為真
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 文本輸入框 */}
<TextInput
style={styles.textInputStyle}
editable={false}
></TextInput>
</View>
);
}
});
效果：
editable.gif
- enablesReturnKeyAutomatically：如果為true订讼，鍵盤會(huì)在文本框內(nèi)沒有文字的時(shí)候禁用確認(rèn)按鈕髓窜。默認(rèn)值為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>
);
}
});
效果：
enablesReturnKeyAutomatically.gif
-
returnKeyType：決定返回鍵的樣式
- default
- go
- join
- next
- route
- search
- send
- yahoo
- done
- emergency-call
var textInputTest = React.createClass({ render(){ return( <View style={styles.container}> {/* 文本輸入框 */} <TextInput style={styles.textInputStyle} returnKeyType="go" ></TextInput> {/* 文本輸入框 */} <TextInput style={styles.textInputStyle} returnKeyType="join" ></TextInput> {/* 文本輸入框 */} <TextInput style={styles.textInputStyle} returnKeyType="done" ></TextInput> </View> ); } });
效果：
returnKeyType.gif
- secureTextEntry：如果值為真躯嫉，文本輸入框就會(huì)使輸入的文本變模糊纱烘，以便于像密碼這樣敏感的文本保持安全，類似 password 屬性祈餐，默認(rèn)值為假
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 文本輸入框 */}
<TextInput
style={styles.textInputStyle}
keyboardType="number-pad"
></TextInput>
</View>
);
}
});
效果：
secureTextEntry.gif
- onChange：當(dāng)文本框內(nèi)容變化時(shí)調(diào)用此回調(diào)函數(shù)
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 文本輸入框 */}
<TextInput
style={styles.textInputStyle}
onChange={() => {alert('文本框內(nèi)容改變')}}
></TextInput>
</View>
);
}
});
效果：
onChange.gif
- onChangeText：當(dāng)文本框內(nèi)容變化時(shí)調(diào)用此回調(diào)函數(shù)擂啥。改變后的文字內(nèi)容會(huì)作為參數(shù)傳遞
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 文本輸入框 */}
<TextInput
style={styles.textInputStyle}
onChangeText={(Text) => {alert('文字改變')}}
></TextInput>
</View>
);
}
});
效果：
onChangeText.gif
- onFocus：當(dāng)文本框獲得焦點(diǎn)的時(shí)候調(diào)用此回調(diào)函數(shù)
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 文本輸入框 */}
<TextInput
style={styles.textInputStyle}
onFocus={() => {alert('文本框獲得焦點(diǎn)')}}
></TextInput>
</View>
);
}
});
效果：
onFoucs.gif
- onBlur：當(dāng)文本框失去焦點(diǎn)的時(shí)候調(diào)用此回調(diào)函數(shù)
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 文本輸入框 */}
<TextInput
style={styles.textInputStyle}
onBlur={() => {alert('失去焦點(diǎn)')}}
></TextInput>
</View>
);
}
});
效果：
onBlur.gif
- onEndEditing：結(jié)束編輯時(shí)，調(diào)用回調(diào)函數(shù)
var textInputTest = React.createClass({
render(){
return(
<View style={styles.container}>
{/* 文本輸入框 */}
<TextInput
style={styles.textInputStyle}
onEndEditing={() => {alert('結(jié)束文本編輯')}}
></TextInput>
</View>
);
}
});
效果：
onEndEditing.gif
