React Native文本输入

前端之家收集整理的这篇文章主要介绍了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
height
26

borderWidth
0.5

borderColor
'#0f0f0f'
padding
4

flex
1

fontSize
13
multiline
50
eventLabel

margin
312
labelContainer

flexDirection
'row'
marginVertical
2
label

width
80
justifyContent
'flex-end'
marginRight
10
paddingTop

exports
title '<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相关文章