Introduction to react Native (v) using the input box textinput, buttons button to build the login interface _react-native

Objective

This article is about the use of the input box component TextInput and button buttons, combining the previous Flexbox layout to build a simple login interface.

No more nonsense, first on the effect of the picture.
Input Box Component TextInput

TextInput is an underlying component that allows users to enter text. The corresponding edittext in Android is the control. Property Autocapitalize Controls whether TextInput will automatically switch specific characters to uppercase. It is evaluated with the following 4 enums:
' characters ': all the characters. ' Words ': the first character of each word. ' Sentences ': the first character of each sentence (default). ' None ': do not automatically toggle any character to uppercase. AutoCorrect if False, automatic spelling correction is turned off. The default value is true. Autofocus if true, the focus is obtained after Componentdidmount. The default value is False. Carethidden If True, hides the cursor. The default value is False DefaultValue provides an initial value in a text box. When the user starts typing, the value can be changed. Editable if False, the text box is not editable. The default value is true. MaxLength limit the maximum number of characters in a text box. Use this property instead of the JS logic to implement, you can avoid flashing phenomenon. Multiline if true, multiple lines of text can be entered in a text box. The default value is False.
When Multiline=false, adding a border style to one edge of an element (for example, borderbottomcolor,borderleftwidth, etc.) will not take effect. In order to achieve the effect you can use a view to wrap textinput. Placeholder if there is no text input, this string is displayed. (Hint in Android) Placeholdertextcolor the text color of the placeholder string display. Securetextentry If True, the text box hides the text that was previously entered, so sensitive text like a password can be more secure. The default value is False.

The bottom two properties, which are used in the Android environment, are consistent with the iOS end for unification. NumberOfLines sets the number of lines in the input box. Use it when Multiline is set to true, which can occupy the corresponding number of rows. Underlinecolorandroid the underline color of the text box if you want to remove the border of the text box, set this property to transparent transparent.
Use: underlinecolorandroid={' Transparent '}

There are also areas to be noted:
①textinput has a bottom border on Android by default, and there are some padding. If you want to make it look the same as possible with iOS, you need to set the padding:0
② on Android. If you set multiline = {true}, the text will be centered vertically by default, and you can set the textalignvertical: ' Top ' style to display it in the roof.

Below are several properties of the property value as a function ().
First, two of the most commonly used onchangetext and onsubmitediting.
Onchangetext: Property accepts a function that is invoked when the text changes, and the changed text content is passed as a parameter.
This attribute is used when we want to read the user input and get the contents of the input box. (Note that this is the only way to take a value from the TextInput.) , you use Onchangetext to write to state and then take the value out of the this.state. , the following example of the login interface will also be available, depending on the example below.

Onsubmitediting: Will be invoked after the text is submitted (the user presses the Submit key on the soft pad). It should be noted that if multiline={true}, this property is not available.

Other attributes, not listed here, can be used to view the official documents. Buttons button

In the RN v0.46 version, the <Button> component was added, which was not before.
I tried it. <Button> the use of components, very simple:

<button
  onpress={onpressed}
  title= "Login"
  color= "green"
  accessibilitylabel= "Learn more about This button "
/>

This is mainly the above 4 attributes:
-Onpress: Receive a click event function.
-Title: The text to be displayed by the button.
-color: The background color of the button (Android), the colour of the text (IOS).
-Accessibilitylabel: Text to be displayed for people with disabilities (for example, the screen reader software may read this)

This is the length:

Here is a very strange thing is that it can not set the width of the height, more precisely the height of the button is fixed, and the width of its parent container is the same width .... You can't set your own width, let alone set it in style. WTF.
I don't know if I have misunderstood myself. Ask for advice.

So, more often, we need to customize the buttons we need. Rather than using it with this <Button> component. Custom button button

We can use three components to make the buttons we need. Or you can search the github.com website for ' React native button ' to see the work of other people in the community. Touchableopacity Touchablehighlight Touchablenativefeedback

There is also a touchablewithoutfeedback, the official does not recommend use.
Here, take touchableopacity as an example of how to customize a button.

<touchableopacity
  activeopacity={0.5}
  style={loginstyles.login}
  onpress={ This.onButtonPress.bind (This)}>
  <text style={{fontsize:15,color: ' White ', FontWeight: ' Bold '}}>
    Login 
  </Text>
</TouchableOpacity>

Simple to use, is to use <TouchableOpacity> components to nest a <Text> text, text is the button display text.
The Activeopacity property specifies how much opacity the encapsulated view displays (usually between 0 and 1) when activated by a touch operation.
Style property to specify the style of the button. (We want the button style, we need to set here, such as rounded corners, wide-high)
Onpress property to receive the Click event function. Same as <Button> components.

As for the customization of the other two components, it is no longer mentioned, you can consult the documentation to find out. A simple login interface to build

Below the input box textinput and custom button, to build a simple login interface. The effect of the picture, at the beginning of the article has already, the following directly look at the code:

Import react, {Component} from ' react ';
    Import {appregistry, Image, StyleSheet, Text, TextInput, alert,//simple JS pop-up box touchableopacity,

dimensions,//get screen wide View} from ' react-native '; var width = dimensions.get (' window '). width;//Get screen width class Logincomponent extends Component {//constructor constructor p
        Rops) {super (props);
    Two state user input box text, cipher box text this.state = {user_text: ', Pass_text: '}; //Click event function onbuttonpress () {alert.alert (' user input ', ' you enter the mobile number/The Phantom account is: ' +this.state.user_text+ ', enter the password is: ' +this.
    State.pass_text);

    }; Render () {return (<view style={loginstyles.container}> <image Source={requi   Re ('./img/flyme5_logo.png ')}//the picture in the project style={loginstyles.logoimg}/> <textinput
                            Placeholder= "mobile number/Phantom account" underlinecolorandroid={' Transparent '}//remove underline Style={loginstyles.useRname}//Writes text to state onchangetext={(User_text) => this.setstate ( {User_text})}
                            /> <textinput placeholder= "password" securetextentry={true}//hide input
                            underlinecolorandroid={' Transparent '} Style={loginstyles.username} 
                    onchangetext={(Pass_text) => this.setstate ({pass_text})}/> activeopacity={0.5}//when clicking on the Transparency Style={loginstyles.login}//Click event , remember to bind Onpress={this.onbuttonpress.bind (this)}> <text style={{fontsize:1
                5,color: ' White ', FontWeight: ' Bold '}}> login </Text>
    </TouchableOpacity> </View>);

}
};
Const Loginstyles = stylesheet.create ({container:{        Flex:1, flexdirection: ' column ', justifycontent: ' Center '}, logoimg: {width:100 , height:108, alignself: ' Center ',//set the position of the Child Control Center marginbottom:60}, Username: {width
        : width-32,//Center, width is screen width-32, so that all have 16 margin borderradius:20,//input box boundary fillet degree bordercolor: ' Skyblue ',//input box boundary color
        Marginbottom:16, paddingleft:10,//here is to enter padding:0,//after the fillet to remove the android default padding borderwidth:1, Alignself: ' Center '//Self centered}, login: {width:width-32, height:35, borderradius:20,// 
        Button rounded corner alignself: ' Center ', backgroundcolor: ' Skyblue ', margintop:20, justifycontent: ' Center ',

Alignitems: ' Center '//Show text component centered}; Appregistry.registercomponent (' Awesomeproject ', () => buttontest);

OK, the details, the comments in the top code are clear.
Here are a few pieces to emphasize here:
①var {height, width} = dimensions.get (' window '); You can get the width of the screen.
If you want to hit the screen pixel, you can use: var pi=pixelratio.get ();
②onchangetext={(text) => this.setstate ({text}) is the only way to get the contents of an input box.
③ button Click event to get the value in state, you need to invoke the bind () method to bind.
Onpress={this.onbuttonpress.bind (This)}
Or we bind in the constructor:
This.onbuttonpress=this.onbuttonpress.bind (this);
Then in use: Onpress={this.onbuttonpress} is the same.

2018/3/1 Update:
First in JavaScript, the This object is bound by the runtime based on the execution environment (that is, the context) of the function. If we use ES5 syntax to write, there is no binding this argument, because in the ES5 will default automatic binding, but in the ES6 to cancel the auto binding, we need to manually bind. If this does not bind the This,this.onbuttonpress method, this will point to the global, bind this to the component instance.

The problem to be noted is that the Bind method returns a new function every time it runs, and in react, each render creates a new function that affects performance.
The above mentioned is bind in the constructor so that no new function is created. But this is still very cumbersome, then there is no better way to spell it. Yes, that's using the arrow function.

Onbuttonpress = () => {
  xxxxxx
};

Onpress={this.onbuttonpress}

The arrow function does not create its own this context, this points to the component instance. It is recommended that you use the arrow function and the code will be much leaner.
For more understanding of bind (this), please refer to the following article for a clearer explanation.
Understand this of the Es6 method creation component in react

Another mention:
Creating components using the ES6 syntax does not support react mixins, and if you must use react mixins you can only create components by using the React.createclass method (the way ES5).

④<text> component Settings FontWeight: ' Bold ' is bold. These properties are basic and can be consulted if needed.
⑤alert pop-up, alert () method has 4 parameters on the Android platform (iOS platform has a alerttype), the first argument is the caption, the second parameter is content, the third parameter is a bottom button array, the fourth parameter is the pop-up box option.
Specific use of:

Alert.alert (
    ' Alert Title ',
    ' my alert Msg ',
    [
      {text: ' asked me later ', Onpress: () => console.log (' Ask M E later pressed ')},
      {text: ' Cancel ', Onpress: () => console.log (' Cancel pressed '), Style: ' Cancel '},
      {text: ' O K ', onpress: () => console.log (' OK pressed ')},
    ],
    {cancelable:false}
)

OK, let's take a look at the input, the effect after clicking the button:
Conclusion

This article understands the customization of input boxes and buttons, and builds a simple login interface. The content involved is still quite a lot. We need to understand digestion slowly.

OK, let's do it first, we'll see you next.