React Native 通告消息竖向轮播组件的封装

React Native 通告消息竖向轮播组件的封装

本文实例为大家分享了React Native通告消息竖向轮播组件的封装代码，供大家参考，具体内容如下

import React, {Component} from 'react'

import {

Text,

View,

Animated,

Easing,

StyleSheet,

} from tbzQBzDWXv'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: translateValue,

// 滚屏高度

scrollHeight: this.props.scrollHeight || 32,

// 滚屏内容

kb_content: [],

// Animated.View 滚动到的 y轴坐标

kb_tempValue: 0,

// 最大偏移量

kb_contentOffsetY: 0,

// 每一次滚动切换之前延迟的时间

delay: this.props.delay || 500,

// 每一次滚动切换的持续时间

duration: this.props.duration || 500,

enableAnimation: true,

}

}

render() {

return (

{

this.state.kb_content.length !== 0 ?

style={[

{flexDirection: 'column'},

{

transform: [

{translateY: this.state.translateValue.y}

]

}

]}>

{this.state.kb_content.map(this._createKbItem.bind(this))}

style={[

{flexDirection: 'column'},

{

transform: [

{translateY: this.state.translateValue.y}

]

}

]}>

{this.state.kb_content.map(this._createKbItem.bind(this))}

}

)

}

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

})

// 开始动画

// this._startAnimation()

this.startAnimation();

}

}

_createKbItem(kbItem, index) {

return (

style={[{justifyContent: 'center', height: this.state.scrollHeight}, this.props.scrollStyle]}>

{kbItem.content}

style={[{justifyContent: 'center', height: this.state.scrollHeight}, this.props.scrollStyle]}>

{kbItem.content}

)

}

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 index = Math.abs(this.state.kb_tempValue) / (this.state.scrollHeight);

this.props.onChange(index

}

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, // 动画持续的时间（单位是毫秒），默认为500

easing: Easing.linear

}

),

])

.start(() => {

// 无缝切换

// Log('end')

if (this.state.kb_tempValue - this.state.scrollHeight === -this.state.kb_contentOffsetY) {

// 快速拉回到初始状态

this.state.translateValue.setValue({x: 0, y: 0});

this.state.kb_tempValue = 0;

}

thistbzQBzDWXv.startAnimation();

})

}

}

const styles = StyleSheet.create({

kbContainer: {

// 必须要有一个背景或者一个border，否则本身高度将不起作用

backgroundColor: 'transparent',

overflow: 'hidden'

},

kb_text_c: {

fontSize: 18,

color: '#181818',

}

使用

import React, {ComponetbzQBzDWXvnt} 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: '降价了',

},

{

title: '全场五折',

},

{

title: '打到骨折',

}

]

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 (

{

if (dataArray && dataArray.length > 0) {

Log(dataArray[this.index].title)

}

}} style={{ flexDirection: 'row', backgroundColor: "#FFFFFF", alignItems: 'center', borderRadius: 8, paddingLeft: 5, paddingRight: 5 }}>

公告

新

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 }} />

查看

);

}

};

}

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, // 动画持续的时间（单位是毫秒），默认为500

easing: Easing.linear

}

),

])

.start(() => {

// 无缝切换

// Log('end')

if (this.state.kb_tempValue - this.state.scrollHeight === -this.state.kb_contentOffsetY) {

// 快速拉回到初始状态

this.state.translateValue.setValue({x: 0, y: 0});

this.state.kb_tempValue = 0;

}

thistbzQBzDWXv.startAnimation();

})

}

}

const styles = StyleSheet.create({

kbContainer: {

// 必须要有一个背景或者一个border，否则本身高度将不起作用

backgroundColor: 'transparent',

overflow: 'hidden'

},

kb_text_c: {

fontSize: 18,

color: '#181818',

}

使用

import React, {ComponetbzQBzDWXvnt} 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: '降价了',

},

{

title: '全场五折',

},

{

title: '打到骨折',

}

]

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 (

{

if (dataArray && dataArray.length > 0) {

Log(dataArray[this.index].title)

}

}} style={{ flexDirection: 'row', backgroundColor: "#FFFFFF", alignItems: 'center', borderRadius: 8, paddingLeft: 5, paddingRight: 5 }}>

公告

新

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 }} />

查看

);

}

};

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 }} />

查看

);

}

};

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。