TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置，譬如自动完成、自动大小写、占位文字，以及多种不同的键盘类型（如纯数字键盘）等等。最简单的用法就是丢一个TextInput到应用里，然后订阅它的onChangeText事件来读取用户的输入。它还有一些其它的事件，譬如onSubmitEditing和onFocus。一个简单的例子如下：this.setState({text})} value={this.state.text} />注意有些属性仅在multiline为true或者为false的时候有效。此外，当multiline=false时，为元素的某一个边添加边框样式（例如：borderBottomColor，borderLeftWidth等）将不会生效。为了能够实现效果你可以使用一个View来包裹TextInput：截图属性autoCapitalize enum('none', 'sentences', 'words', 'characters') 控制TextInput是否要自动将特定字符切换为大写：characters: 所有的字符。words: 每个单词的第一个字符。sentences: 每句话的第一个字符（默认）。none: 不自动切换任何字符为大写。autoCorrect bool 如果为false，会关闭拼写自动修正。默认值是true。autoFocus bool 如果为true，在componentDidMount后会获得焦点。默认值为false。blurOnSubmit bool 如果为true，文本框会在提交的时候失焦。对于单行输入框默认值为true，多行则为false。注意：对于多行输入框来说，如果将blurOnSubmit设为true，则在按下回车键时就会失去焦点同时触发onSubmitEditing事件，而不会换行。defaultValue string 提供一个文本框中的初始值。当用户开始输入的时候，值就可以改变。在一些简单的使用情形下，如果你不想用监听消息然后更新value属性的方法来保持属性和状态同步的时候，就可以用defaultValue来代替。editable bool 如果为false，文本框是不可编辑的。默认值为true。keyboardType enum("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') 决定弹出的何种软键盘的，譬如numeric（纯数字键盘）。这些值在所有平台都可用：defaultnumericemail-addressmaxLength number 限制文本框中最多的字符数。使用这个属性而不用JS逻辑去实现，可以避免闪烁的现象。multiline bool 如果为true，文本框中可以输入多行文字。默认值为false。onBlur function 当文本框失去焦点的时候调用此回调函数。onChange function 当文本框内容变化时调用此回调函数。onChangeText function 当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递。onEndEditing function 当文本输入结束后调用此回调函数。onFocus function 当文本框获得焦点的时候调用此回调函数。onLayout function 当组件挂载或者布局变化的时候调用，参数为{x, y, width, height}。onSubmitEditing function 此回调函数当软键盘的确定/提交按钮被按下的时候调用此函数。如果multiline={true}，此属性不可用。placeholder string 如果没有任何文字输入，会显示此字符串。placeholderTextColor string 占位字符串显示的文字颜色。secureTextEntry bool 如果为true，文本框会遮住之前输入的文字，这样类似密码之类的敏感文字可以更加安全。默认值为false。selectTextOnFocus bool 如果为true，当获得焦点的时候，所有的文字都会被选中。selectionColor string 设置输入框高亮时的颜色（在iOS上还包括光标）style Text#style 译注：这意味着本组件继承了所有Text的样式。value string 文本框中的文字内容。TextInput是一个受约束的(Controlled)的组件，意味着如果提供了value属性，原生值会被强制与value属性保持一致。在大部分情况下这都工作的很好，不过有些情况下会导致一些闪烁现象——一个常见的原因就是通过不改变value来阻止用户进行编辑。如果你希望阻止用户输入，可以考虑设置editable={false}；如果你是希望限制输入的长度，可以考虑设置maxLength属性，这两个属性都不会导致闪烁。iosclearButtonMode enum('never', 'while-editing', 'unless-editing', 'always') 是否要在文本框右侧显示“清除”按钮。iosclearTextOnFocus bool 如果为true，每次开始输入的时候都会清除文本框的内容。iosenablesReturnKeyAutomatically bool 如果为true，键盘会在文本框内没有文字的时候禁用确认按钮。默认值为false。ioskeyboardAppearance enum('default', 'light', 'dark') 指定键盘的颜色。iosonKeyPress function 当一个键被按下的时候调用此回调。被按下的键会作为参数传递给回调函数。会在onChange之前调用。iosreturnKeyType enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') 决定“确定”按钮显示的内容。iosselectionState DocumentSelectionState 参见DocumentSelectionState.js，可以控制一个文档中哪段文字被选中的状态。androidnumberOfLines number 设置输入框的行数。当multiline设置为true时使用它，可以占据对应的行数。androidunderlineColorAndroid string 文本框的下划线颜色(译注：如果要去掉文本框的边框，请将此属性设为透明transparent)。方法isFocused(): boolean 返回值表明当前输入框是否获得了焦点。clear() 清空输入框的内容。例子iOS'use strict';var React = require('react');var ReactNative = require('react-native');var { Text, TextInput, View, StyleSheet,} = ReactNative;var WithLabel = React.createClass({ render: function() { return ({this.props.label}{this.props.children}); },});var TextEventsExample = React.createClass({ getInitialState: function() { return { curText: '', prevText: '', prev2Text: '', prev3Text: '', }; }, updateText: function(text) { this.setState((state) => { return { curText: text, prevText: state.curText, prev2Text: state.prevText, prev3Text: state.prev2Text, }; }); }, 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 )} onSelectionChange={(event) => this.updateText( 'onSelectionChange range: ' + event.nativeEvent.selection.start + ',' + event.nativeEvent.selection.end )} onKeyPress={(event) => { this.updateText('onKeyPress key: ' + event.nativeEvent.key); }} style={styles.default} />{this.state.curText}{'\n'}
(prev: {this.state.prevText}){'\n'}
(prev2: {this.state.prev2Text}){'\n'}
(prev3: {this.state.prev3Text})); }});class AutoExpandingTextInput extends React.Component { state: any; constructor(props) { super(props); this.state = {text: '', height: 0}; } render() { return ({ this.setState({ text: event.nativeEvent.text, height: event.nativeEvent.contentSize.height, }); }} style={[styles.default, {height: Math.max(35, this.state.height)}]} value={this.state.text} /> ); }}class RewriteExample extends React.Component { state: any; constructor(props) { super(props); this.state = {text: ''}; } render() { var limit = 20; var remainder = limit - this.state.text.length; var remainderColor = remainder > 5 ? 'blue' : 'red'; return ({ text = text.replace(/ /g, '_'); this.setState({text}); }} style={styles.default} value={this.state.text} />{remainder}); }}class RewriteExampleInvalidCharacters extends React.Component { state: any; constructor(props) { super(props); this.state = {text: ''}; } render() { return ({
this.setState({text: text.replace(/\s/g, '')});
}}
style={styles.default}
value={this.state.text}
/>); }}class TokenizedTextExample extends React.Component { state: any; constructor(props) { super(props); this.state = {text: 'Hello #World'}; } render() { //define delimiter let delimiter = /\s+/; //split string let _text = this.state.text; let token, index, parts = []; while (_text) { delimiter.lastIndex = 0; token = delimiter.exec(_text); if (token === null) { break; } index = token.index; if (token[0].length === 0) { index = 1; } parts.push(_text.substr(0, index)); parts.push(token[0]); index = index + token[0].length; _text = _text.slice(index); } parts.push(_text); //highlight hashtags parts = parts.map((text) => { if (/^#/.test(text)) { return{text}; } else { return text; } }); return ({ this.setState({text}); }}>{parts}); }}var BlurOnSubmitExample = React.createClass({ focusNextField(nextField) { this.refs[nextField].focus(); }, render: function() { return (this.focusNextField('2')} />this.focusNextField('3')} />this.focusNextField('4')} />this.focusNextField('5')} />); }});var styles = StyleSheet.create({ page: { paddingBottom: 300, }, default: { height: 26, borderWidth: 0.5, borderColor: '#0f0f0f', flex: 1, fontSize: 13, padding: 4, }, multiline: { borderWidth: 0.5, borderColor: '#0f0f0f', flex: 1, fontSize: 13, height: 50, padding: 4, marginBottom: 4, }, multilineWithFontStyles: { color: 'blue', fontWeight: 'bold', fontSize: 18, fontFamily: 'Cochin', height: 60, }, multilineChild: { width: 50, height: 40, position: 'absolute', right: 5, backgroundColor: 'red', }, eventLabel: { margin: 3, fontSize: 12, }, labelContainer: { flexDirection: 'row', marginVertical: 2, flex: 1, }, label: { width: 115, alignItems: 'flex-end', marginRight: 10, paddingTop: 2, }, rewriteContainer: { flexDirection: 'row', alignItems: 'center', }, remainder: { textAlign: 'right', width: 24, }, hashtag: { color: 'blue', fontWeight: 'bold', },});exports.displayName = (undefined: ?string);exports.title = '';exports.description = 'Single and multi-line text inputs.';exports.examples = [ { title: 'Auto-focus', render: function() { return (); } }, { title: "Live Re-Write (-> '_') + maxLength", render: function() { return; } }, { title: 'Live Re-Write (no spaces allowed)', render: function() { return; } }, { title: 'Auto-capitalize', 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 (); }); return{examples}; } }, { title: 'Keyboard appearance', render: function() { var keyboardAppearance = [ 'default', 'light', 'dark', ]; var examples = keyboardAppearance.map((type) => { return (); }); 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 (); }); 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: 'Colored input text', render: function() { return (); } }, { title: 'Colored highlight/cursor for text input', render: function() { return (); } }, { title: 'Clear button mode', render: function () { return (); } }, { title: 'Clear and select', render: function() { return (); } }, { title: 'Blur on submit', render: function(): ReactElement { return; }, }, { title: 'Multiline blur on submit', render: function() { return (alert(event.nativeEvent.text)}
/>); } }, { title: 'Multiline', render: function() { return (); } }, { title: 'Auto-expanding', render: function() { return (); } }, { title: 'Attributed text', render: function() { return; } },];Android'use strict';var React = require('react');var ReactNative = require('react-native');var { Text, TextInput, View, StyleSheet,} = ReactNative;var TextEventsExample = React.createClass({ getInitialState: function() { return { curText: '', prevText: '', prev2Text: '', }; }, updateText: function(text) { this.setState((state) => { return { curText: text, prevText: state.curText, prev2Text: state.prevText, }; }); }, 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.singleLine} />{this.state.curText}{'\n'}
(prev: {this.state.prevText}){'\n'}
(prev2: {this.state.prev2Text})); }});class AutoExpandingTextInput extends React.Component { constructor(props) { super(props); this.state = {text: '', height: 0}; } render() { return ({ this.setState({ text: event.nativeEvent.text, height: event.nativeEvent.contentSize.height, }); }} style={[styles.default, {height: Math.max(35, this.state.height)}]} value={this.state.text} /> ); }}class RewriteExample extends React.Component { constructor(props) { super(props); this.state = {text: ''}; } render() { var limit = 20; var remainder = limit - this.state.text.length; var remainderColor = remainder > 5 ? 'blue' : 'red'; return ({ text = text.replace(/ /g, '_'); this.setState({text}); }} style={styles.default} value={this.state.text} />{remainder}); }}class TokenizedTextExample extends React.Component { constructor(props) { super(props); this.state = {text: 'Hello #World'}; } render() { //define delimiter let delimiter = /\s+/; //split string let _text = this.state.text; let token, index, parts = []; while (_text) { delimiter.lastIndex = 0; token = delimiter.exec(_text); if (token === null) { break; } index = token.index; if (token[0].length === 0) { index = 1; } parts.push(_text.substr(0, index)); parts.push(token[0]); index = index + token[0].length; _text = _text.slice(index); } parts.push(_text); //highlight hashtags parts = parts.map((text) => { if (/^#/.test(text)) { return{text}; } else { return text; } }); return ({ this.setState({text}); }}>{parts}); }}var BlurOnSubmitExample = React.createClass({ focusNextField(nextField) { this.refs[nextField].focus(); }, render: function() { return (this.focusNextField('2')} />this.focusNextField('3')} />this.focusNextField('4')} />this.focusNextField('5')} />); }});var styles = StyleSheet.create({ multiline: { height: 60, fontSize: 16, padding: 4, marginBottom: 10, }, eventLabel: { margin: 3, fontSize: 12, }, singleLine: { fontSize: 16, padding: 4, }, singleLineWithHeightTextInput: { height: 30, }, hashtag: { color: 'blue', fontWeight: 'bold', },});exports.title = '';exports.description = 'Single and multi-line text inputs.';exports.examples = [ { title: 'Auto-focus', render: function() { return (); } }, { title: "Live Re-Write (-> '_')", render: function() { return; } }, { title: 'Auto-capitalize', render: function() { var autoCapitalizeTypes = [ 'none', 'sentences', 'words', 'characters', ]; var examples = autoCapitalizeTypes.map((type) => { return (); }); return{examples}; } }, { title: 'Auto-correct', render: function() { return (); } }, { title: 'Keyboard types', render: function() { var keyboardTypes = [ 'default', 'email-address', 'numeric', 'phone-pad', ]; var examples = keyboardTypes.map((type) => { return (); }); return{examples}; } }, { title: 'Blur on submit', render: function(): ReactElement { return; }, }, { title: 'Event handling', render: function(): ReactElement { return; }, }, { title: 'Colors and text inputs', render: function() { return (Darker backgroundColor); } }, { title: 'Text input, themes and heights', render: function() { return (); } }, { title: 'fontFamily, fontWeight and fontStyle', render: function() { return (); } }, { title: 'Passwords', render: function() { return (); } }, { title: 'Editable', render: function() { return (); } }, { title: 'Multiline', render: function() { return (multiline with children, aligned bottom-right); } }, { title: 'Fixed number of lines', platform: 'android', render: function() { return (); } }, { title: 'Auto-expanding', render: function() { return (); } }, { title: 'Attributed text', render: function() { return; } }, { title: 'Return key', render: function() { var returnKeyTypes = [ 'none', 'go', 'search', 'send', 'done', 'previous', 'next', ]; var returnKeyLabels = [ 'Compile', 'React Native', ]; var examples = returnKeyTypes.map((type) => { return (); }); var types = returnKeyLabels.map((type) => { return (); }); return{examples}{types}; } },];