建站
咨詢
售后
建站咨詢
新聞中心
通過鍵盤將文本輸入到應用程序的一個基本的組件。屬性提供幾個功能的可配置性，比如自動校正，自動還原，占位符文本，和不同的鍵盤類型，如數(shù)字鍵盤。 最簡單的一個用例是放置一個 TextInput，利用 onChangeText 事件來讀取用戶的輸入。還有其他的事件可以使用，比如onSubmitEditing 和 onFocus。一個簡單的例子：
成都創(chuàng)新互聯(lián)是一家專業(yè)提供陜西企業(yè)網(wǎng)站建設,專注與網(wǎng)站建設、成都做網(wǎng)站、成都h5網(wǎng)站建設、小程序制作等業(yè)務。10年已為陜西眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡公司優(yōu)惠進行中。
this.setState({input: text})} /> {'user input: ' + this.state.input}
value 屬性可以用于設置輸入的值，其目的是讓組件的狀態(tài)更清晰，但是value 一次，但是你同樣可以根據(jù)onChangeText 不斷的改變它的值。如果你真的想要迫使組件一直都可以恢復到你設置的值，那么你可以設置成controlled={true}。
不是所有版本都支持 multiline 屬性，然后有些屬性只支持多行輸入。
屬性
Edit on GitHub
autoCapitalize enum('none', 'sentences', 'words', 'characters')
可以通知文本輸入自動利用某些字符。
-
characters：所有字符，
-
words：每一個單詞的首字母
-
sentences：每個句子的首字母（默認情況下）
-
none：不會自動使用任何東西
autoCorrect 布爾型
如果值為假，禁用自動校正。默認值為真。
autoFocus 布爾型
如果值為真，聚焦 componentDidMount 上的文本。默認值為假。
bufferDelay 數(shù)值型
這個會幫助避免由于 JS 和原生文本輸入之間的競態(tài)條件而丟失字符。默認值應該是沒問題的，但是如果你每一個按鍵都操作的非常緩慢，那么你可能想嘗試增加這個。
clearButtonMode enum('never', 'while-editing', 'unless-editing', 'always')
清除按鈕出現(xiàn)在文本視圖右側的時機
controlled 布爾型
如果你真想要它表現(xiàn)成一個控制組件，你可以將它的值設置為真，但是按下按鍵，并且/或者緩慢打字，你可能會看到它閃爍，這取決于你如何處理 onChange 事件。
editable 布爾型
如果值為假，文本是不可編輯的。默認值為真。
enablesReturnKeyAutomatically 布爾型
如果值為真，當沒有文本的時候鍵盤是不能返回鍵值的，當有文本的時候會自動返回。默認值為假。
keyboardType enum('default', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'email-address', 'decimal-pad', 'twitter', 'web-search', "numeric")
決定打開哪種鍵盤，例如，數(shù)字鍵盤。
multiline 布爾型
如果值為真，文本輸入可以輸入多行。默認值為假。
onBlur 函數(shù)
當文本輸入是模糊的，調(diào)用回調(diào)函數(shù)
onChange 函數(shù)
當文本輸入的文本發(fā)生變化時，調(diào)用回調(diào)函數(shù)
onChangeText 函數(shù)
onEndEditing 函數(shù)
onFocus 函數(shù)
當輸入的文本是聚焦狀態(tài)時，調(diào)用回調(diào)函數(shù)
onSubmitEditing 函數(shù)
password 布爾型
如果值為真，文本輸入框就成為一個密碼區(qū)域。默認值為假。
placeholder 字符串型
在文本輸入之前字符串將被呈現(xiàn)出來
placeholderTextColor 字符串型
占位符字符串的文本顏色
returnKeyType enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call')
決定返回鍵的樣式
secureTextEntry 布爾型
如果值為真，文本輸入框就會使輸入的文本變得模糊，以便于像密碼這樣敏感的文本保持安全。默認值為假。
selectionState 文檔選擇狀態(tài)
見 DocumentSelectionState.js，一些狀態(tài)是為了維護一個文檔的選擇信息。
style Text#style
testID 字符串型
用于端對端測試時定位視圖。
value 字符串型
文本輸入的默認值
例子
Edit on GitHub
'use strict';var React = require('react-native');var {
Text,
TextInput,
View,
StyleSheet,
} = React;var WithLabel = React.createClass({
render: function() { return (
{this.props.label}
{this.props.children}
);
}
});var TextEventsExample = React.createClass({
getInitialState: function() { return {
curText: '',
prevText: '',
};
},
updateText: function(text) {
this.setState({
curText: text,
prevText: this.state.curText,
});
},
render: function() { return (
this.updateText('onFocus')}
onBlur={() => this.updateText('onBlur')}
onChange={(event) => this.updateText( 'onChange text: ' + event.nativeEvent.text
)}
onEndEditing={(event) => this.updateText( 'onEndEditing text: ' + event.nativeEvent.text
)}
onSubmitEditing={(event) => this.updateText( 'onSubmitEditing text: ' + event.nativeEvent.text
)}
style={styles.default}
/>
{this.state.curText}{'\n'}
(prev: {this.state.prevText})
);
}
});var styles = StyleSheet.create({
page: {
paddingBottom: 300,
}, default: {
height: 26,
borderWidth: 0.5,
borderColor: '#0f0f0f',
padding: 4,
flex: 1,
fontSize: 13,
},
multiline: {
borderWidth: 0.5,
borderColor: '#0f0f0f',
flex: 1,
fontSize: 13,
height: 50,
},
eventLabel: {
margin: 3,
fontSize: 12,
},
labelContainer: {
flexDirection: 'row',
marginVertical: 2,
flex: 1,
},
label: {
width: 80,
justifyContent: 'flex-end',
flexDirection: 'row',
marginRight: 10,
paddingTop: 2,
},
});
exports.title = '';
exports.description = 'Single-line text inputs.';
exports.examples = [
{
title: 'Auto-focus',
render: function() { return
);
}
},
{
title: 'Auto-correct',
render: function() { return (
);
}
},
{
title: 'Keyboard types',
render: function() { var keyboardTypes = [ 'default', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'email-address', 'decimal-pad', 'twitter', 'web-search', 'numeric',
]; var examples = keyboardTypes.map((type) => { return (
{examples} ;
}
},
{
title: 'Return key types',
render: function() { var returnKeyTypes = [ 'default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call',
]; var examples = returnKeyTypes.map((type) => { return (
{examples} ;
}
},
{
title: 'Enable return key automatically',
render: function() { return (
);
}
},
{
title: 'Secure text entry',
render: function() { return (
);
}
},
{
title: 'Event handling',
render: function(): ReactElement { return
);
}
},
{
title: 'Clear button mode',
render: function () { return (
);
}
},
];
分享標題：創(chuàng)新互聯(lián)React教程：文本輸入
分享路徑：http://www.dlmjj.cn/article/ccsdscp.html
