[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