[React Native Development] ViewPagerAndroid of React Native Control and Performance instance on the top of Meituan homepage (17)

[React Native Development] ViewPagerAndroid of React Native Control and Performance instance on the top of Meituan homepage (17)
(1) Preface

Today, let's take a look at how the ViewPagerAndroid component is parsed and modeled to achieve the top effect of the Meituan homepage.

The newly created React Native technology exchange group (282693535). You are welcome to join us! At the same time, on the left side of the blog, you are welcome to scan the subscription number, mobile technology, and technology push!

The ViewPagerAndroid component in React Native for Android is similar to the ViewPager control in Android. This container allows the sub-views in the container to slide left and right each other. Each sub-view in ViewPagerAndroid serves as a separate page, and the entire ViewPagerAndroid component interface is fully filled.

[Note] All child views in ViewPagerAndroid must be Widget, cannot be a compound component. You can add attributes such as padding or backgroundColor to each sub-view.

(2) official instances

If you have studied Android or Web Front-end development, it is easier to learn such ViewPagerAndroid components. We can use this component for advertising, carousel, and other related effects ~

First, let's take a look at the official instance (I have modified it accordingly). The specific code is as follows:

 

'Use strict '; import React, {AppRegistry, Component, StyleSheet, Text, View, ViewPagerAndroid,} from 'react-native'; class ViewPagerDemoextends Component {render () {return (<view> <text style = "{styles. welcome} "> ViewPagerAndroid instance </text> <viewpagerandroidstyle = {styles. pagestyle} initialpage = "{0}"> <viewstyle = {backgroundcolor: "red" }}> <text> FirstPage! </Text> </viewstyle ={{ backgroundcolor: "red" }}> </viewpagerandroidstyle = {styles. pagestyle >></view> <viewstyle ={{ backgroundcolor: "yellow" }}> <text> SecondPage! </Text>) ;}} const styles = StyleSheet. create ({pageStyle: {alignItems: 'center', padding: 20, height: 200,}); AppRegistry. registerComponent ('viewpagerdemo', () => ViewPagerDemo); </viewstyle ={{ backgroundcolor: "yellow"}>

 

The official instance runs as follows:

(3) attribute Methods

• View-related property styles are inherited (for example, width and height, background color, margins, and other related property styles)
• InitialPage number ViewPagerAndroid initial index page. However, you can use the setPage method to update the page number and use the onPageSelected method to monitor page slides.
• KeyboardDismissMode enum ('none', 'on-drag') Enumeration type, to set whether to display the keyboard during the drag and drop operation.

  'None' default value. The keyboard is not hidden during drag and drop.

  'On-drag' hide the keyboard when dragging and sliding starts

  • OnPageScroll function method, which is executed when the page is sliding (whether it is due to page sliding animation or drag and drop between pages or sliding reasons ). this will call back the incoming event. the nativeEvent object will carry the following parameters:

    'Position' indicates the index of the first visible page starting from the left.

    'Offset' the value range is [0, 1), which indicates the status of the current page but changed. The value x indicates that the index page () is visible, and the value x indicates the area visible to the next page.

    • OnPageScrollStateChanged function this callback method is called when the page rolling status changes. The scrolling status of a page may be as follows:

      'Idle' indicates that the current user has no interaction with the Page scrolling.

      'Dragging ': indicates that the current page is being dragged and moved.

      'Settling' indicates that there is a page drag or slide interaction. Page rolling is finishing. And the animation is being closed or opened.

      • OnPageSelected function Method: call back after the drag/drop switchover is completed on the page. The event. nativeEvent object in the callback parameter of this method carries the following attribute: 'position', which indicates the index of the currently selected page.

        (4) ViewPagerAndroid instance

        We have explained in detail the basic introduction examples of ViewPagerAndroid components and related attribute methods above. Next we will return to achieve the classification switching page at the top of the home page of Meituan.

        First, let's analyze the effect on the top of the Meituan homepage, which includes the business Item portal of Meituan. Each page contains the Top Ten versions. Two pages can be switched between the left and right sides. The specific code is as follows:

         

        /*** @ Autor: Jiang qingqing * imitating and implementing the category item Function instance * https://github.com/facebook/react-native */'use strict '; import React, {AppRegistry, Component, StyleSheet, text, View, Image, ViewPagerAndroid,} from 'react-native '; var titles_first_data = ["Gourmet", "movie", "hotel", "KTV", "takeout ", "Pay for discount", "Perimeter games", "leisure and entertainment", "new orders today", "beauty"]; var titles_second_data = ["shopping", "Train ticket ", "Life service", "Travel", "car service", "foot massage", "snacks and fast food", "classic tickets", "overseas travel", "All Categories"]; var ViewPagerDemo = React. createClass ({getInitialState: function () {return {page: 1 ,};}, onPageSelected: function (e) {this. setState ({page: 1 + e. nativeEvent. position}) ;}, render () {return (<view> <text style = "{textAlign: 'center' }}"> effect instance on the top of Meituan homepage </text> <viewpagerandroid initialpage = "{0}" style = "{styles. pageStyle} "data-cke-pa-onpageselected =" {this. onPageSelected} "> <view style =" {flexDirection: 'row'} "> <view style =" {width: 70 }}">  <text style =" {styles. textStyle} ">{ titles_first_data [0] }</text> </view> <view style =" {width: 70 }}">  <text style =" {styles. textStyle} ">{ titles_first_data [1] }</text> </view> <view style =" {width: 70 }}">  <text style =" {styles. textStyle} ">{ titles_first_data [2] }</text> </view> <view style =" {width: 70 }}">  <text style =" {styles. textStyle} ">{ titles_first_data [3] }</text> </view> <view style =" {width: 70 }}">  <text style =" {styles. textStyle} ">{ titles_first_data [4] }</text> </view> <viewstyle ={{ flexdirection: 'row', margintop: 10 }}> <view style = "{width: 70 }}">  <text style =" {styles. textStyle} ">{ titles_first_data [5] }</text> </view> <view style =" {width: 70 }}">  <text style =" {styles. textStyle} ">{ titles_first_data [6] }</text> </view> <view style =" {width: 70 }}">  <text style =" {styles. textStyle} ">{ titles_first_data [7] }</text> </view> <view style =" {width: 70 }}">  <text style =" {styles. textStyle} ">{ titles_first_data [8] }</text> </view> <view style =" {width: 70 }}">  <text style =" {styles. textStyle} ">{ titles_first_data [9] }</text> </view> </viewstyle ={{ flexdirection: 'row', margintop: 10 }}></view> </viewpagerandroid> </view> <view style = "{flexDirection: 'row' }}"> <view style = "{width: 70 }}">  <text style =" {styles. textStyle} ">{ titles_second_data [0] }</text> </view> <view style =" {width: 70 }}">  <text style =" {styles. textStyle} ">{ titles_second_data [1] }</text> </view> <view style =" {width: 70 }}">  <text style =" {styles. textStyle} ">{ titles_second_data [2] }</text> </view> <view style =" {width: 70 }}">  <text style =" {styles. textStyle} ">{ titles_second_data [3] }</text> </view> <view style =" {width: 70 }}">  <text style =" {styles. textStyle} ">{ titles_second_data [4] }</text> </view> <viewstyle ={{ flexdirection: 'row', margintop: 10 }}> <view style = "{width: 70 }}">  <text style =" {styles. textStyle} ">{ titles_second_data [5] }</text> </view> <view style =" {width: 70 }}">  <text style =" {styles. textStyle} ">{ titles_second_data [6] }</text> </view> <view style =" {width: 70 }}">  <text style =" {styles. textStyle} ">{ titles_second_data [7] }</text> </view> <view style =" {width: 70 }}">  <text style =" {styles. textStyle} ">{ titles_second_data [8] }</text> </view> <view style =" {width: 70 }}">  <text style =" {styles. textStyle} ">{ titles_second_data [9] }</text> </view> </viewstyle ={{ flexdirection: 'row', margintop: 10 }}> </view> <text style = "{flex: 1, alignSelf: 'center' }}"> current {this. state. page} page </text>) ;}}); const styles = StyleSheet. create ({pageStyle: {marginTop: 10, alignItems: 'center', height: 150,}, textStyle: {marginTop: 5, alignSelf: 'center', fontSize: 11, color: '#555555', textAlign: 'center'}, imageStyle: {alignSelf: 'center', width: 45, height: 45}); AppRegistry. registerComponent ('viewpagerdemo', () => ViewPagerDemo );

         

        The specific running effect is as follows: