Implementation of ScrollView carousel image in React Native, reactscrollview

Implementation of ScrollView carousel image in React Native, reactscrollview

1. index. Android. js

import React, { Component } from 'react';  import {    AppRegistry,    StyleSheet,    TextInput,    TouchableOpacity,    ScrollView,    Text,    View  } from 'react-native';    import ScrollViewDemo from "./scrollViewDemo";  import ScrollViewTop from "./scrollViewTop";  import PositionDemo from "./positionDemo";    export default class CQQLoginDemo extends Component {        render() {      return (      <ScrollViewTop/>      );    }    }  AppRegistry.registerComponent('CQQLoginDemo', () => CQQLoginDemo);  

2. Create a json file in the same directory of index. android. js of the project to facilitate image access. The resource image is placed under the project name \ android \ app \ src \ main \ res \ drawable.

Here, BadgeData. json is as follows:

{"Data": [{"icon": "danjianbao", "title": "shoulder bag" },{ "icon": "liantiaobao", "title ": "chain package" },{ "icon": "qianbao", "title": "wallet" },{ "icon": "shoutibao", "title ": "handbag" },{ "icon": "shuangjianbao", "title": "shoulder bag" },{ "icon": "xiekuabao", "title ": "messenger bag"}]}

3. The main file scrollViewTop. js has written the Code directly in the following annotations:

/*** Sample React Native App * https://github.com/facebook/react-native * @ Flow */import React, {Component} from 'react '; import {AppRegistry, StyleSheet, ScrollView, Image, Text, View} from 'react-native '; let Dimensions = require ('dimensions '); let ScreenWidth = Dimensions. get ('window '). width; let ScreenHeight = Dimensions. get ('window '). height; import ImageData from ". /BadgeData. json "; export default class scrollViewTop extends Component {constructor (props) {s Uper (props); this. state = {currentPage: 0 };} static defaultProps = {duration: 1000,} componentDidMount () {this. _ startTimer ();} componentWillUnmount () {// if this. timer, clearTimeout is used for clearing. // If you use multiple timer, use multiple variables, or use an array to save the reference, and then clear this one by one. timer & clearTimeout (this. timer);} render () {return (<View style = {styles. continer }> <ScrollView ref = 'scrollview' // horizontal = {true} // when the value is true, the scroll bar showsHorizontalScrollIndicator = {false} is displayed. // when the value is true, the scroll bar stops at an integer multiple of the size of the scroll view. This can be used for pagingEnabled = {true} on the horizontal page. // After sliding a onMomentumScrollEnd ={ (e) =>{ this. _ onAnimationEnd (e) }}// start to drag onScrollBeginDrag = {() => {this. _ onScrollBeginDrag () }}// end dragging onScrollEndDrag = {() => {this. _ onScrollEndDrag () }}> {this. _ renderAllImage () }</ScrollView> <View style = {styles. pageViewStyle }>{ this. _ renderAllIndicator ()} </View>);}/** start dragging */_ onScrollBeginDrag () {console. log ("start to drag"); // you can clear both methods. No difference // this. timer & clearInterval (this. timer); this. timer & clearTimeout (this. timer);}/** stop dragging */_ onScrollEndDrag () {console. log ("stop dragging"); this. timer & this. _ startTimer ();}/** 1. carousel Image Display */_ renderAllImage () {let allImage = []; let imgsArr = ImageData. data; for (let I = 0; I );} return allImage;}/** 2. manual sliding paging implementation */_ onAnimationEnd (e) {// obtain the offset let offsetX = e. nativeEvent. contentOffset. x; // obtain the current page number. let pageIndex = Math. floor (offsetX/ScreenWidth); // change the state machine this. setState ({currentPage: pageIndex});}/** 3. page pointer implementation */_ renderAllIndicator () {let indicatorArr = []; let style; let imgsArr = ImageData. data; for (let I = 0; I • </Text>);} return indicatorArr;}/** 4. use a timer to automatically play the carousel image */_ startTimer () {let scrollView = this. refs. scrollView; this. timer = setInterval () => {console. log ('Enable timer '); let imageCount = ImageData. data. length; // 4.1 set the Dot let activePage = 0; // 4.2 judge if (this. state. currentPage> = imageCount + 1) {activePage = 0;} else {activePage = this. state. currentPage + 1;} // 4.3 Update the state machine this. setState ({currentPage: activePage}); // 4.4 let the scrollview scroll up let offsetX = activePage * ScreenWidth; scrollView. scrollResponderScrollTo ({x: offsetX, y: 0, animated: true}) ;}, this. props. duration) ;}} const styles = StyleSheet. create ({continer: {backgroundColor: '# dddddd'}, imageStyle: {height: 400, width: ScreenWidth}, pageViewStyle: {height: 25, width: ScreenWidth, backgroundColor: 'rgba (0.4, 0,) ', position: 'abort', bottom: 0, flexDirection: 'row', alignItems: 'center ',}});