Usage details of some common components in react native (II)
preface
This article introduces some in-depth components in react native. Because you don't fully grasp the syntax of ES6, we use the mixed syntax of Es5 and ES6 for the time being.
Scrollview component
It can call the components of the Scrollview of the mobile platform, and also integrates the "responder" system of touch locking.
Note that you must give the Scrollview a height, or the height of its parent.
common method
Special components
Example
Create a scroll. JS file
The code is as follows:
Then change the index.ios.js file to the following:
Final effect:
Listview component
Used to efficiently display a list of changing data that can be scrolled vertically.
The most basic way to use it is to create a listview.datasource data source, then pass it an ordinary data array, then use the data source to instantiate a listview component, and define its renderrow callback function. This function will accept each data in the array as a parameter and return a renderable component (as each row of listview).
data processing
Listview.datasource provides high-performance data processing and access for listview components.
We need to call a method to extract data from the original input data to create a listviewdatasource object and use it to compare data changes.
Datasource initialization:
Common properties
Example make a movie list
The blogger has previously obtained some JSON files introduced by the movie from the cat's eye movie. Interested students can go to the cat's eye movie list to obtain some information. Note that JSON format conversion is required here!
Here, create a movielist. JS file
The code is as follows:
Then change the index.ios.js file to the following:
Final effect:
Navigator component
Using the Navigator allows you to switch between different scenes (pages) of the application. It is essentially similar to the navigation bar function in HTML.
However, the jump of navigator page needs to distinguish different scenes through routing objects.
Using the renderscene method, the navigation bar can render the scene according to the specified route.
To set up the navigator
Step 1: set the attribute initialroute: initialize the route object and specify the default page, that is, the first page you see after starting the app;
Step 2: configure scene: configure scene animation and gestures;
Step 3: renderscene; Render the scene, parameter route (navigator route object created and set in the first step), Navigator (Navigator object)
Code display:
Example
Create a nav.js file
The code is as follows:
In the index.ios.js file, the code is changed as follows:
Final effect:
Tablebarios component
Tablebar is a label bar placed at the bottom of the screen with many horizontal label icons. Users can click different internal icons to switch the views displayed on the screen. Tablebar IOS is only applicable to IOS platform
Common properties
TabBarIOS.Item
Tabbarios.item is an icon for each tab that can be clicked. Different views are displayed according to different clicks
Common properties
Code display:
Example
Create a tabbar.js file
The code is as follows:
In the index.ios.js file, the code is changed as follows:
Network request
React native provides a fetch API that is consistent with the web standard to meet the needs of developers to access the network. It is very similar to Ajax I have learned before.
The first parameter of fetch () is the request address
fetch(‘ https://mywebsite.com/mydata.json ');
The second parameter is optional and can be used to customize some parameters of the HTTP request
Where body represents the data to be transmitted
The fetch method will return a promise, and the returned data needs to be processed
The then method is added to the chain structure for successful data processing
If there are errors, catch them
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.