2021SC@SDUSC

Component analysis

In the previous blog s, we have analyzed some components, including scrollview, viewPager, waterfallView, image and list view components. This time, let's interpret the textInput component.

textInput component

textInput is the basic component of input text. It provides the configuration of a variety of features, such as auto completion, auto case, placeholder text, and a variety of different keyboard types.

parameter analysis

parameter	effect
value	Specifies the value of the textInput component
defaultValue	The initial value in the text box changes when the user enters
editable	Sets whether the text box can be edited
keyboardType	Soft keyboard pop-up settings
returnKeyType	Style of soft keyboard enter key
maxLength	The maximum number of characters in a text box
multiline	Determines whether the text box can enter multiline text
numberOfLines	Maximum number of lines for TextInput
autoFocus	Get focus automatically when rendering components
underlineColorAndroid	Bottom line color
placeholder	There is no text input to display the string
placeholderTextColor	The color of the placeholder string
placeholderTextColors	Color array of placeholder strings
onBlur	This function is called when the text box loses focus
onEndEditing	Call the function at the end of text entry
onChangeText	Function when text box changes
onContentSizeChange	Callback called when the size of the text input changes
onKeyboardWillShow	Call when keyboard pops up
onSelectionChange	Called when the range of the selection text in the input box is changed

Implementation of specific methods

getValue: get the content in the text box

public getValue(): Promise<string> {
    return new Promise((resolve) => {
      callUIFunction(this.instance as Element, 'getValue', (res: TextInputEvent) => resolve(res.text));
    });
  }

setValue: sets the content in the text box

public setValue(value: string): string {
    callUIFunction(this.instance as Element, 'setValue', [value]);
    return value;
  }

Focus: specify InputText to get focus

public focus() {
    callUIFunction(this.instance as Element, 'focusTextInput', []);
  }

blur: causes the specified input component to lose focus

public blur() {
    callUIFunction(this.instance as Element, 'blurTextInput', []);
  }

Clear: clear the contents of the input box

public clear() {
    callUIFunction(this.instance as Element, 'clear', []);
  }

showInputMethod: call up the soft keyboard

public showInputMethod() {
    callUIFunction(this.instance as Element, 'showInputMethod', []);
  }

Precautions for using textInput

Since hippy is a multi platform framework, this component will be different when applied to Android and ios. The textInput on Android may be covered by the pop-up keyboard. At this time, we need to modify the AndroidMainfest.xml file and add android:windowSoftInputMode = "adjustPan" on the activity. The specific solutions are as follows:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.tencent.mtt.hippy.example"
>
    <application
        android:allowBackup="true"
        android:label="@string/app_name"
    >
        <!-- be careful android:windowSoftInputMode="adjustPan" Write in activity In the parameters of-->
        <activity android:name=".MyActivity"
            android:windowSoftInputMode="adjustPan"
            android:label="@string/activity_name"
            android:configChanges="orientation|screenSize"
        >
        </activity>
    </application>
</manifest>

Summary

textInput is a word processing component in hippy react. Using this component, we can operate text boxes, keyboards and other problems, and its methods can basically meet our development needs.