React Native advertises the encapsulation of the vertical carousel component of a message, reactnative

React Native advertises the encapsulation of the vertical carousel component of a message, reactnative

This example shares the encapsulation code of the vertical carousel component of the React Native announcement message for your reference. The details are as follows:

Import React, {Component} from 'react 'import {Text, View, Animated, Easing, StyleSheet ,} from 'react-native 'export default class ScrollVertical extends Component {static defaultProps = {enableAnimation: true,}; constructor (props) {super (props) let translateValue = new Animated. valueXY ({x: 0, y: 0}) translateValue. addListener ({x, y}) =>{// Log ('value', x, y)}) this. state = {translateValue: trans LateValue, // scrolling height scrollHeight: this. props. scrollHeight | 32, // scrolling content kb_content: [], // Animated. the coordinate kb_tempValue of the Y axis to which the View scrolls: 0, // The maximum offset kb_contentOffsetY: 0, // the delay time before each rolling switch delay: this. props. delay | 500, // duration of each rolling switch: this. props. duration | 500, enableAnimation: true, }} render () {return (<View style = {[styles. kbContainer, {height: this. state. scrollHeight}, this. props. kbCont Ainer] }>{ this. state. kb_content.length! = 0? <Animated. view style = {[{flexDirection: 'column'}, {transform: [{translateY: this. state. translateValue. y}]}> {this. state. kb_content.map (this. _ createKbItem. bind (this)} </Animated. view>: null} </View>)} componentWillReceiveProps (nextProps) {Log ('componentwillreceiveprops ', nextProps) this. setState ({enableAnimation: nextProps. enableAnimation? True: false}, () => {this. startAnimation () ;})} componentDidMount () {Log ('componentdidmount') let content = this. props. data | [] if (content. length! = 0) {let h = (content. length + 1) * this. state. scrollHeight this. setState ({kb_content: content. concat (content [0]), kb_contentOffsetY: h}) // start animation // this. _ startAnimation () this. startAnimation () ;}}_ createKbItem (kbItem, index) {return (<View key = {index} style = {[{justifyContent: 'center', height: this. state. scrollHeight}, this. props. scrollStyle] }> <Text style = {[styles. kb_text_c, this. props. t ExtStyle] }>{ kbItem. content} </Text> </View>)} startAnimation = () =>{ if (this. state. enableAnimation) {if (! This. animation) {this. animation = setTimeout () => {this. animation = null; this. _ startAnimation () ;}, this. state. delay) ;}} componentWillUnmount () {if (this. animation) {clearTimeout (this. animation);} if (this. state. translateValue) {this. state. translateValue. removeAllListeners () ;}}_ startAnimation = () => {this. state. kb_tempValue-= this. state. scrollHeight; if (this. props. onChange) {let inde X = Math. abs (this. state. kb_tempValue)/(this. state. scrollHeight); this. props. onChange (index <this. state. kb_content.length-1? Index: 0);} Animated. sequence ([// Animated. delay (this. state. delay), Animated. timing (this. state. translateValue, {isInteraction: false, toValue: {x: 0, y: this. state. kb_tempValue}, duration: this. state. duration, // animation duration (unit: milliseconds). The default value is 500 easing: Easing. linear}),]). start () => {// seamless switch // Log ('end') if (this. state. kb_tempValue-this. state. scrollHeight =-this. state. kb_contentOffsetY) {// quickly pull back to the initial state this. state. translateValue. setValue ({x: 0, y: 0}); this. state. kb_tempValue = 0;} this. startAnimation () ;}}} const styles = StyleSheet. create ({kbContainer: {// there must be a background or a border, otherwise the height will not work backgroundColor: 'transparent ', overflow: 'den den'}, kb_text_c: {fontSize: 18, color: '#181818 ',}

Use

Import React, {Component} from 'react '; import {StyleSheet, View, TouchableOpacity, Alert, ScrollView, ART, TouchableHighlight, ListView, Dimensions, Text} from 'react-native '; import ScrollVertical from '.. /.. /app-widget/scroll-vertical 'const dataArray = [{title: 'price markdown ',}, {title: 'price-per-view',}, {title: 'Hit fracture ',}] export default class extends React. component {render () {let array = [{content: ''}]; if (dataArray & dataArray. length> 0) {array = []; for (let item of dataArray) {array. push ({content: item. title}) ;}return (<View style = {padding: Constant. sizeMarginDefault, paddingBottom: 0, backgroundColor: '# ffff' }}> <TouchableOpacity onPress ={() =>{ if (dataArray & dataArray. length> 0) {Log (dataArray [this. index]. title) }}style = {flexDirection: 'row', backgroundColor: "# FFFFFF", alignItems: 'center', borderRadius: 8, paddingLeft: 5, paddingRight: 5 }}> <Text style ={{ fontSize: Constant. scaleFontSize (14) }}fontweight = {'bold '}> announcement </Text> <View style = {marginLeft: 5, marginRight: 8, backgroundColor:' # b01638 ', borderRadius: 8, width: 22, alignItems: 'center', }}> <Text style ={{ color: 'white', fontSize: Constant. fontSizeSmall }> new </Text> </View> <View style ={{ flexDirection: 'row', flex: 1 }}> <ScrollVertical onChange = {(index => {this. index = index ;})} enableAnimation = {true} data = {array} delay = {2500} duration = {1000} scrollHeight = {34} scrollStyle = {alignItems: 'flex-start'} textStyle = {color: Constant. colorTxtContent, fontSize: Constant. fontSizeSmall }}/> </View> <View style = {height: 14, width: 1, backgroundColor: Constant. colorTxtContent }}/> <Text style = {color: Constant. colorTxtContent, paddingLeft: Constant. sizeMarginDefault, fontSize: Constant. fontSizeSmall }> View </Text> </TouchableOpacity> </View> );}};

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.