React Native Knowledge 3-TextInput component, react3-textinput

React Native Knowledge 3-TextInput component, react3-textinput

TextInput is a basic component that allows users to input text on the keyboard in an application. The attributes of this component provide various features, such as automatic completion, auto case, placeholder text, and a variety of different keyboard types (such as pure numeric keypad. Its style attributes are the same as those of Text;

I. Attributes

1: autoCapitalize enum ('none', 'sentics', 'word', 'characters ')

Controls whether TextInput automatically switches a specific character to uppercase:

Characters: All characters.

Words: the first character of each word.

Sentences: the first character of each sentence (default ).

None: do not automatically switch any characters to uppercase.

2: autoCorrect bool

If it is false, automatic spelling correction is disabled. The default value is true.

3: autoFocus bool

If it is true, the focus is obtained after componentDidMount. The default value is false.

4: blurOnSubmit bool

If this parameter is set to true, the text box is defocused when it is submitted. The default value of a single-line input box is true, and that of multiple rows is false. NOTE: For the multi-line input box, if you set blurOnSubmit to true, the onSubmitEditing event will be triggered when you press the Enter key without the focus.

5: defaultValue string

Provide the initial values in a text box. The value can be changed when the user starts to input.

In some simple scenarios, if you do not want to use the method of listening to messages and updating the value attribute to keep the attributes and status synchronized, you can use defaultValue instead.

6: editable bool

If it is false, the text box cannot be edited. The default value is true.

7: keyboardType enum ("default", 'numeric ', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url ', 'Number-pad ', 'phone-pad', 'name-phone-pad ', 'decimal'-pad', 'twitter ', 'web-search ')

Determines which soft keyboard is popped up, such as numeric ).

These values are available on all platforms:

Default

Numeric

Email-address

MaxLength number

Limit the maximum number of characters in a text box. This attribute can be implemented without JS logic to avoid flickering.

8: multiline bool

If it is true, you can enter multiple lines of text in the text box. The default value is false.

9: onBlur function

This callback function is called when the text box loses focus.

10: onChange function

This callback function is called when the content of the text box changes.

11: onChangeText function

This callback function is called when the content of the text box changes. The changed text content is passed as a parameter.

12: onEndEditing function

This callback function is called after the text input is complete.

13: onFocus function

This callback function is called when the text box gets the focus.

14: onLayout function

When the component is mounted or the layout changes, the parameter is {x, y, width, height }.

15: onSubmitEditing function

This callback function is called when the OK/submit button of the soft keyboard is pressed. This attribute is unavailable if multiline = {true.

16: placeholder string

This string is displayed if no text is input.

17: placeholderTextColor string

The text color of the placeholder string.

18: secureTextEntry bool

If it is true, the text box will overwrite the text previously entered, so that sensitive text such as passwords can be more secure. The default value is false.

19: selectTextOnFocus bool

If it is true, all text will be selected when the focus is obtained.

20: selectionColor string

Set the color when the input box is highlighted (the cursor is also included on iOS)

21: value string

Text Content in the text box.

TextInput is a constrained component, which means that if the value attribute is provided, the native value is forced to be consistent with the value attribute. This works well in most cases, but in some cases it may cause some flashes-a common cause is to prevent users from editing by not changing the value. If you want to block user input, you can set editable = {false}. If you want to restrict the length of input, you can set the maxLength attribute, which will not cause blinking.

22: iosclearButtonMode enum ('never ', 'while-editing', 'unless-editing', 'alway ')

Whether to display the "clear" button on the right of the text box.

23: (ios) clearTextOnFocus bool

If this parameter is set to true, the text box is cleared each time the input starts.

24 :( ios) enablesReturnKeyAutomatically bool

If it is true, the confirmation button is disabled when no text is in the text box. The default value is false.

25 :( ios) keyboardAppearance enum ('default', 'light', 'dark ')

Specifies the keyboard color.

26: (ios) onKeyPress function

This callback is called when a key is pressed. The pressed key is passed as a parameter to the callback function. It will be called before onChange.

27 :( ios) returnKeyType enum ('default', 'Go', 'Google ', 'join', 'Next', 'route', 'search', 'send ', 'yahoo ', 'done', 'emergency-call ')

Determine the content displayed by the "OK" button.

28: (ios) selectionState DocumentSelectionState

For more information, see DocumentSelectionState. js to control the status of selected text in a document.

29: (android) numberOfLines number

Set the number of rows in the input box. It is used when multiline is set to true, which can occupy the corresponding number of rows.

30 :( android) underlineColorAndroid string

Underline color of the text box (Note: If you want to remove the border of the text box, set this attribute to transparent ).

 

Ii. Method

1: isFocused (): boolean

The returned value indicates whether the current input box obtains the focus.

2: clear ()

Clear the content of the input box.

 

Iii. instance code

Import React, {Component} from 'react '; import {AppRegistry, StyleSheet, AlertIOS, Text, View, TextInput, Alert} from 'react-native '; class ReactNativeProject extends Component {myOnChangeText (newText) {console. log ('inputed text: '+ newText); alert (newText);} render () {return (<View style = {styles. container }> <TextInput keyboardType = "numeric" placeholder = "Enter the user name" style = {styles. inputTextTopStyle} clearTextOnFocus = {true}/> <TextInput keyboardType = "default" style = {styles. inputTextCenterStyle} returnKeyType = "next" maxLength = {5} defaultValue = "Default Value" clearButtonMode = "always"/> <TextInput autoFocus = {true} defaultValue = "automatically retrieve Focus" style = "{marginTop: 30, height: 30, borderWidth: 1, borderColor: 'red'} onChangeText = {this. myOnChangeText}/> <TextInput multiline = {true} style = {styles. inputTextBottomStyle} defaultValue = "multi-line text input box"/> <TextInput secureTextEntry = {true} style = {styles. inputTextCenterStyle} defaultValue = "123456" editable = {false}> </TextInput> <TextInput style = {styles. inputTextCenterStyle} defaultValue = "focal point RESPONSE event" onBlur = {() => AlertIOS. prompt ('Secure text', null, null, 'secure-text') }></TextInput> </View>) ;}} const styles = StyleSheet. create ({container: {flex: 1, marginTop: 64}, inputTextTopStyle: {height: 20, borderWidth: 1, borderColor: 'blue', marginLeft: 15, marginRight: 15}, inputTextCenterStyle: {marginTop: 10, marginLeft: 15, borderColor: 'red', borderWidth: 1, height: 25}, inputTextBottomStyle: {marginTop: 20, marginLeft: 15, borderColor: 'red', borderWidth: 1, height: 45 }}); AppRegistry. registerComponent ('reactnativeproject', () => ReactNativeProject );

: