Detaillierte Erläuterung der Kapselung der vertikalen Karussellkomponente von React Native

In diesem Artikel wird hauptsächlich die Kapselung der vertikalen Karussellkomponente für React Native-Benachrichtigungen vorgestellt. Ich hoffe, dass sie jedem helfen kann.

Das Beispiel in diesem Artikel teilt den Kapselungscode der vertikalen Karussellkomponente für React Native-Benachrichtigungen als Referenz. Der spezifische Inhalt lautet wie folgt:

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: 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 (
      <View style={[styles.kbContainer, {height: this.state.scrollHeight}, this.props.kbContainer]}>
        {
          this.state.kb_content.length !== 0 ?
            <Animated.View
              style={[
                {flexDirection: &#39;column&#39;},
                {
                  transform: [
                    {translateY: this.state.translateValue.y}
                  ]
                }
              ]}>
              {this.state.kb_content.map(this._createKbItem.bind(this))}
            </Animated.View> : null
        }
      </View>
    )
  }

  componentWillReceiveProps(nextProps) {
    Log(&#39;componentWillReceiveProps&#39;, nextProps)
      this.setState({
          enableAnimation: nextProps.enableAnimation?true:false
        }, () => {
          this.startAnimation();
        }
      )
  }

  componentDidMount() {
    Log(&#39;componentDidMount&#39;)
    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 (
      <View key={index}
         style={[{justifyContent: &#39;center&#39;, height: this.state.scrollHeight}, this.props.scrollStyle]}>
        <Text style={[styles.kb_text_c, this.props.textStyle]}>{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 index = 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, // 动画持续的时间（单位是毫秒），默认为500
          easing: Easing.linear
        }
      ),
    ])
      .start(() => {
        // 无缝切换
        // Log(&#39;end&#39;)
        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;
        }
        this.startAnimation();



      })
  }
}

const styles = StyleSheet.create({
  kbContainer: {
    // 必须要有一个背景或者一个border，否则本身高度将不起作用
    backgroundColor: &#39;transparent&#39;,
    overflow: &#39;hidden&#39;
  },
  kb_text_c: {
    fontSize: 18,
    color: &#39;#181818&#39;,
  }

Verwenden Sie

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: '降价了',
  },
  {
    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 (
      <View style={{ padding: Constant.sizeMarginDefault, paddingBottom: 0, backgroundColor: &#39;#FFFFFF&#39; }}>
        <TouchableOpacity onPress={() => {
          if (dataArray && dataArray.length > 0) {
            Log(dataArray[this.index].title)
          }
        }} style={{ flexDirection: &#39;row&#39;, backgroundColor: "#FFFFFF", alignItems: &#39;center&#39;, borderRadius: 8, paddingLeft: 5, paddingRight: 5 }}>
          <Text style={{ fontSize: Constant.scaleFontSize(14) }} fontWeight={&#39;bold&#39;}>公告</Text>
          <View style={{ marginLeft: 5, marginRight: 8, backgroundColor: &#39;#b01638&#39;, borderRadius: 8, width: 22, alignItems: &#39;center&#39;, }}>
            <Text style={{ color: &#39;white&#39;, fontSize: Constant.fontSizeSmall }}>新</Text>
          </View>
          <View style={{ flexDirection: &#39;row&#39;, flex: 1 }}>
            <ScrollVertical
              onChange={(index => {
                this.index = index;
              })}
              enableAnimation={true}
              data={array}
              delay={2500}
              duration={1000}
              scrollHeight={34}
              scrollStyle={{ alignItems: &#39;flex-start&#39; }}
              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 }}>查看</Text>
        </TouchableOpacity>
      </View>
    );

  }
};

Verwandte Empfehlungen:

So implementieren Sie die React Native-Adressauswahlfunktion

So beheben Sie den domänenübergreifenden Ressourcenladefehler in React Native

Ausführliche Erklärung zum Aufbau einer Entwicklungsumgebung für React Native

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Kapselung der vertikalen Karussellkomponente von React Native. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!