TextInput

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};    }  },];

你可能感兴趣的:(TextInput)