React Native文本输入

http://w3cschool.codecloud.net/react-native/react-native-text-input.html

通过键盘将文本输入到应用程序的一个基本的组件。属性提供几个功能的可配置性，比如自动校正，自动还原，占位符文本，和不同的键盘类型，如数字键盘。最简单的一个用例是放置一个 TextInput，利用 onChangeText 事件来读取用户的输入。还有其他的事件可以使用，比如onSubmitEditing 和 onFocus。一个简单的例子：

<View>
 TextInput
  style={{height: 40,borderColor: 'gray'borderWidth:1}}
  onChangeText{(text) => this.setState({input: text})}
 />
 Text{'user input: ' + this.state.input}</
>

value 属性可以用于设置输入的值，其目的是让组件的状态更清晰，但是<TextInput> 所有的选项都是异步的，所以默认情况下它并不表现的像一个真正的控制组件。就像设置默认值一样设置 value 一次，但是你同样可以根据onChangeText 不断的改变它的值。如果你真的想要迫使组件一直都可以恢复到你设置的值，那么你可以设置成controlled={true}。

不是所有版本都支持 multiline 属性，然后有些属性只支持多行输入。

属性

autoCapitalizeenum(‘none’,‘sentences’,‘words’,‘characters’)

可以通知文本输入自动利用某些字符。

characters：所有字符，
words：每一个单词的首字母
sentences：每个句子的首字母（默认情况下）
none：不会自动使用任何东西

autoCorrect布尔型

如果值为假，禁用自动校正。默认值为真。

autoFocus布尔型

如果值为真，聚焦 componentDidMount 上的文本。默认值为假。

bufferDelay数值型

这个会帮助避免由于 JS 和原生文本输入之间的竞态条件而丢失字符。默认值应该是没问题的，但是如果你每一个按键都操作的非常缓慢，那么你可能想尝试增加这个。

clearButtonModeenum(‘never’,‘while-editing’,‘unless-editing’,‘always’)

清除按钮出现在文本视图右侧的时机

controlled布尔型

如果你真想要它表现成一个控制组件，你可以将它的值设置为真，但是按下按键，并且/或者缓慢打字，你可能会看到它闪烁，这取决于你如何处理 onChange 事件。

editable布尔型

如果值为假，文本是不可编辑的。默认值为真。

enablesReturnKeyAutomatically布尔型

如果值为真，当没有文本的时候键盘是不能返回键值的，当有文本的时候会自动返回。默认值为假。

keyboardTypeenum(‘default’,“ascii-capable”,‘numbers-and-punctuation’,‘url’,‘number-pad’,‘phone-pad’,‘name-phone-pad’,’email-address’,‘decimal-pad’,‘twitter’,‘web-search’,“numeric”)

决定打开哪种键盘，例如，数字键盘。

multiline布尔型

如果值为真，文本输入可以输入多行。默认值为假。

onBlur函数

当文本输入是模糊的，调用回调函数

onChange函数

当文本输入的文本发生变化时，调用回调函数

onChangeText函数

onEndEditing函数

onFocus函数

当输入的文本是聚焦状态时，调用回调函数

onSubmitEditing函数

password布尔型

如果值为真，文本输入框就成为一个密码区域。默认值为假。

placeholder字符串型

在文本输入之前字符串将被呈现出来

placeholderTextColor字符串型

占位符字符串的文本颜色

returnKeyTypeenum(‘default’,‘go’,‘google’,‘join’,‘next’,‘route’,‘search’,‘send’,‘yahoo’,‘done’,’emergency-call’)

决定返回键的样式

secureTextEntry布尔型

如果值为真，文本输入框就会使输入的文本变得模糊，以便于像密码这样敏感的文本保持安全。默认值为假。

selectionState文档选择状态

见 DocumentSelectionState.js，一些状态是为了维护一个文档的选择信息。

styleText#style

testID字符串型

用于端对端测试时定位视图。

value字符串型

文本输入的默认值

例子

'use strict';
var React= require('react-native');{
 Text,TextInputViewStyleSheet
}ReactWithLabel.createClass({
 render: function() 
  return(
   <View style={styleslabelContainer}>
    label
     >{thisprops}</Text>
    </>{children</View>
  );
 }
});
var TextEventsExample = React.createClass({
 getInitialState: function() {
  return {
   curText: '<No Event>',
   prevText:   };
 },
 updateText: (text){
  this.setState({
   curText: text,
   prevText: this.state.curText,
  });
 },
 render:  (
   <View>
    <TextInput
     autoCapitalize="none"
     placeholder="Enter text to see events"
     autoCorrect={false}
     onFocus={() => 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}
    /TexteventLabelstatecurText}{'\n'prevprevText})/Text>
   </
  
 }); styles create
 page
  paddingBottom 300},239)">
 default
  height26
  borderWidth0.5
  borderColor '#0f0f0f'
  padding4
  flex1
  fontSize13
 multiline50
 eventLabel
  margin312
 labelContainer
  flexDirection'row'
  marginVertical2
 label
  width80
  justifyContent'flex-end'
  marginRight10
  paddingTop
exportstitle '<TextInput>'description 'Single-line text inputs.'examples [
  title'Auto-focus'
  render
   TextInput autoFocus={true./>;'Auto-capitalize' label="none"
      
       autoCapitalize"none"
       style/>/WithLabel>
     <WithLabel label="sentences">
      <TextInput
       autoCapitalize=
       style={styles.}
      /"words""characters"/WithLabel>
    </'Auto-correct'"true" autoCorrect"false">
      <TextInput autoCorrect={} style={styles.} /'Keyboard types' keyboardTypes 
    'default''ascii-capable''numbers-and-punctuation''url''number-pad''phone-pad''name-phone-pad''email-address''decimal-pad''twitter''web-search''numeric']; examples  keyboardTypesmap((type)=>
     key
       keyboardType/WithLabel>
    );
   });
    <View>{examples}</>;'Return key types' returnKeyTypes 'go''google''join''next''route''search''send''yahoo''done''emergency-call' returnKeyTypes
       returnKeyType'Enable return key automatically' enablesReturnKeyAutomatically'Secure text entry' secureTextEntry value"abc"'Event handling'() ReactElementTextEventsExample'Colored input text'
      style={[color'blue'}]}
      value"Blue"'green'"Green"/View>
   );
  }
 },
 {
  title: 'Clear button mode'  render: function {
    (
    <View>
     <WithLabel label="never">
      <TextInput
       style={styles.}
       clearButtonMode=
      /"while editing""while-editing""unless editing""unless-editing""always"];

React Native文本输入

属性

例子

相关推荐