|
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"]; （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
