Usage details of some common components in react native (I)
preface
This article introduces some common components in react native. Because you don't fully grasp the syntax of ES6, we temporarily use the mixed syntax of Es5 and ES6.
View component
View is a support Flex@R_ 652_ 2419 @ a container for layout, style, some touch processing, and some accessibility functions, and it can be placed in other views or have any number of sub views of any type.
View is designed to be used with stylesheet, which can make the code clearer and achieve higher performance. Although inline styles can also be used.
Common style settings for view
Take the mobile terminal Ctrip official website as an example
Final effect:
Text component
A react component for displaying text, and it also supports nesting, styling, and touch processing.
Common characteristics
Common style settings
Take Netease News on mobile terminal as an example
Create header.js and news.js files
The specific code of header.js is as follows:
The specific code of news.js is as follows:
Finally, modify the code in the index.ios.js file to:
Final effect:
Touchable class components
This component is used to encapsulate the view so that it can respond correctly to touch operations
Common style settings
Example
Create a touchable.js file
The code inside is:
In the index.ios.js file, the code is changed to:
Final effect:
Some effects may be lost when the picture is converted to GIF. Clicking the touchableopacity button will become transparent, the background color of the touchablehighlight button will change, and there will be no change when clicking the touchablewithoutfeedback button
Textinput component
Textinput is a basic component that allows users to enter text through the keyboard in an application. The properties of this component provide the configuration of a variety of features, such as auto completion, auto case, placeholder text, and a variety of different keyboard types (such as pure numeric keyboard).
Common properties
Example
Create a file of input.js
The code inside is:
In the index.ios.js file, the code is changed to:
Final effect:
Image component
A react component used to display many different types of pictures, including network pictures, static resources, temporary local pictures, and pictures on local disks (such as photo albums).
Static picture loading
The code is as follows: < image source = {require ('. / my icon. PNG')} / >
Network picture loading
Note: the Xcode of the network image request HTTP request needs to be set, and the no after allow arbitrary loads in info.plist should be changed to yes. Specify the picture address through source. The code is as follows: < image source = (note that double curly braces are required here, because only single curly braces can be displayed for special reasons) {URI:‘ https://facebook.github.io/react/img/logo_og.png '} (note that double curly braces are required here. For special reasons, only single curly braces can be displayed) / >
Example
Create an image.js file and save a picture to the local, here is 1.png
The code inside is:
In the index.ios.js file, the code is changed to:
Final effect:
summary
The above is the whole content of this article. I hope the content of this article can bring some help to your study or work. If you have any questions, you can leave a message. Thank you for your support for programming tips.